1

我通过 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/

4

0 回答 0