CSS と HTML を使用してコンテンツ スライダーを作成しました。コンテンツ スライダーは正常に動作しますが、私がやろうとしているのは、img を「label-for」タグでラップすることです。これは可能ですか？別の解決策はありますか。imgをクリックして特定のスライドに移動できるようにしたいだけです。
また、私はそれが奇妙にレイアウトされていることを知っています。これは、WordPress サイトの短いコードとしてインラインで記述されています。
<div class="wood-container">
<label for="slide-1-trigger">
<img src="http://104.236.119.181/Jake/wp-content/uploads/2016/06/Warm-Hearts-duo-tones-Hue-Img.png">
</label>
</div>
<div class="html">
<div class="body">
<div class="wrap">
<header>
<label for="slide-1-trigger">Select</label>
<label for="slide-2-trigger">Premium</label>
<label for="slide-3-trigger">Decor</label>
<label for="slide-4-trigger">Style</label>
<label for="slide-5-trigger">Tradition</label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked>
<section class="slide slide-one">
<h1>Select</h1>
<h3 style="color: white;"> This selection of quality highlighted by the uniformity in color and shading . Still, it is showing details of character that demonstrate the natural and unique characteristics of the soil. The slats contain few knots of 12 mm maximum. They may contain small cracks and holes knots, always reintegrated toned putty.</h3>
</section>
<input id="slide-2-trigger" type="radio" name="slides">
<section class="slide slide-two">
<h1>Premium</h1>
<h3 style="color: white;"> Large woods always have a strong personality. The details of character are the nodes, veins and existing shades in the Premium selection are less pronounced. The knot density is low , reaching these a diameter up to 25mm . They may contain small cracks and holes knots, always reintegrated toned putty. It contains veins, longitudinal shadows and occasionally sapwood fragments that provide natural character and beauty to the wood.</h3>
</section>
<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">
<h1>Decor</h1>
<h3> This selection is characterized by a greater variability tone and the presence of nodes that can reach 25 mm in diameter. It contains veins and longitudinal accused shadows that bring natural character and beauty to wood , which especially stand out in the heat - treated presentations. </h3>
</section>
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Style</h1>
<h3> Characterized by its hardiness, this selection offers shows accentuated woody patterns, with sinuous veining and abundance of knots that can reach 6 cm in diameter. Occasional tables show caulked natural cracks and strips of sapwood, which further accentuate the naturalness of the selection.</h3>
</section>
<input id="slide-5-trigger" type="radio" name="slides">
<section class="slide slide-five">
<h1>Tradition</h1>
<h3>Characterized by its hardiness, this selection offers shows accentuated woody patterns , with sinuous veining and abundance of knots that can reach 6 cm in diameter. Occasional tables show caulked natural cracks and strips of sapwood, which further accentuate the naturalness of the selection.</h3>
</section>
</div>
</div>
</div>
CSS:
<style> @import url(http://fonts.googleapis.com/css?family=lato);
html {
box-sizing: border-box;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
h1 {
color: #fff;
font-family: "lato", cursive;
font-size: 2em;
font-size: 6vw;
line-height: 1.2;
text-shadow: 1px 1px 1px #333;
}
h3 {
color: white;
font-family: "lato";
font-size: 16px;
line-height: 1.2;
text-align: center;
margin: 20px;
}
@media (min-width: 67.1875em) {
h1 {
font-size: 4em;
}
}
.html,
body {
height: 100%;
width: auto;
margin: 20px;
padding: 20px;
}
.wood-container {
width: 250px;
height: auto;
float: left;
margin 20px;
}
.wood-container img {
max-width: 100%;
}
.wrap {
height: 430px;
width: 100%;
position: relative;
overflow: hidden;
background: #120103;
color: #fff;
text-align: center;
}
header {
background: #3E474F;
box-shadow: 0 .5em 1em #111;
position: relative;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: .75em;
font-weight: bold;
padding: 0 1em;
}
header label:hover {
background: #2e353b;
}
.slide {
height: 430px;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
-webkit-transition: left 0s .75s;
transition: left 0s .75s;
}
.slide h1 {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: opacity .5s, -webkit-transform .5s .5s;
transition: opacity .5s, -webkit-transform .5s .5s;
transition: transform .5s .5s, opacity .5s;
transition: transform .5s .5s, opacity .5s, -webkit-transform .5s .5s;
}
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
-webkit-transition: left .65s ease-out;
transition: left .65s ease-out;
}
[id^="slide"]:checked + .slide h1 {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all .5s .5s;
transition: all .5s .5s;
}
</style>
JSFiddle へのリンク。https://jsfiddle.net/deathbydiabetes/939yu48q/2/