如何将类“当前”添加到纯CSS滑块点导航？

Question

我有这个码页，我用一些jQuery来修改它，以获得额外的元素。为了获得更好的可用性，我想将类current添加到表示当前幻灯片的点(label.dot-#，其中"#“等于相应的幻灯片)。

我只是想不出该怎么做。我不介意添加更多的jQuery来实现这一点。

​

$(function() { // run when the DOM is ready

  $(".clickable").click(function() { 
    $(this).parents('div').toggleClass('minimize');
   // $('.information').toggleClass('minimize');  
  });
  
   $(".next").click(function() { 
    $(this).parents('div').removeClass('minimize');
  });

});

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Helvetica", sans-serif;
}

img {
  max-width: 100%;
}

.slider-container {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.menu {
  position: absolute;
  left: 0;
  z-index: 900;
  width: 100%;
  bottom: 0;
}

.menu label {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50px;
  margin: 0 .2em 1em;
  position: relative;
}
.menu label:hover {
  background: red;
}

.menu label.current {
  background: red;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 10;
  padding: 8em 1em 0;
  background-size: cover;
  background-position: 50% 50%;
  transition: left 0s .75s;
}

[id^="slide"]:checked + .slide {
  left: 0;
  z-index: 100;
  transition: left .65s ease-out;
}

.slide-1 {
  background-image: url("https://source.unsplash.com/t7YycgAoVSw/1600x900");
}

.slide-2 {
  background-image: url("https://source.unsplash.com/11H1SSVcIxc/1600x900");
}

.slide-3 {
  background-image: url("https://source.unsplash.com/OlZ1nWLEEgM/1600x900");
}

.information {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background: pink;
  text-align: left;
  transition: all .3s ease;
}
.information h3 {
  transition: all .5s ease;
  opacity: 1;
}

.information.minimize {
  right: -30%;
}
.information.minimize h3 {
  opacity: 0;
}

.nav label {
  width: 200px;
  height: 100%;
  display: block;
  position: relative;
  opacity: 1;
  z-index: 9;
  cursor: pointer;
  transition: opacity .2s;
  color: #FFF;
  font-size: 156pt;
  text-align: center;
  line-height: 380px;
  font-family: "Varela Round", sans-serif;
}

.nav .next {
  right: 0;
}

.intro {
  position: absolute;
  bottom: 25%;
  left: 0;
  width: 30%;
  background: #fff;
  text-align: left;
  padding-left: 150px;
}

<div class="slider-container">

  <div class="menu">
    <label for="slide-dot-1" class="dot-1"></label>
    <label for="slide-dot-2" class="dot-2"></label>
    <label for="slide-dot-3" class="dot-3"></label>
  </div>

  <input id="slide-dot-1" type="radio" name="slides" checked>
  <div class="slide slide-1">
    <div class="intro">
      <h5>Header</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio.</p>
    </div>
    <div class="information">
      <h1 class="clickable">++</h1>
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio. Integer tristique mi eget sem ultrices auctor. Nam quis tellus ac magna ornare ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl </h3>
      <div class="nav">
        <label for="slide-dot-2" class="next">&#x203a;</label>
      </div>
    </div>
  </div>

  <input id="slide-dot-2" type="radio" name="slides">
  <div class="slide slide-2">
    <div class="information">
      <h1 class="clickable">++2</h1>
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio. Integer tristique mi eget sem ultrices auctor. Nam quis tellus ac magna ornare ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl </h3>
      <div class="nav">
        <label for="slide-dot-3" class="next">&#x203a;</label>
      </div>
    </div>
  </div>

  <input id="slide-dot-3" type="radio" name="slides">
  <div class="slide slide-3">
    <div class="information">
      <h1 class="clickable">++3</h1>
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio. Integer tristique mi eget sem ultrices auctor. Nam quis tellus ac magna ornare ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl </h3>
      <div class="nav">
        <label for="slide-dot-1" class="next">&#x203a;</label>
      </div>
    </div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

Answer 1

1. 收听有关输入的更改事件。
2. 转换由其id-attribute检索的更改输入索引

更深层次的解释在注释良好的源代码中：

​

$(function() { // document ready

  // cache dots
  $Dots = $('.slider-container').find('.menu > label[class^="dot-"]');
  // add class current and cache first dot
  $DotCurrent = $Dots.first().addClass('current');
  $('[name="slides"]').on('change', function() {
    // while in my setup the event only fired when the checked property "changed to true"
    // I recommend to sanitize in case that some environments may also fire on "changed to false" checked property
    if ( !$(this).prop('checked') ) return;
    $DotCurrent.removeClass('current');
    // this.id == "slide-dot-#" where # is the new current slide number (1 is the first slide)
    // so it would be much cheaper to do (-1 (+this.id.substr(10)))
    // but for maintenance we simply delete all non numerics of this.id
    // this way "slide-dot-#" can be "slide-xyz-dot-#" in future without changing the logic here
    $DotCurrent = $Dots.eq( -1 + (+this.id.replace(/[^0-9]/g, '')) ).addClass('current');
  })

});

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Helvetica", sans-serif;
}

img {
  max-width: 100%;
}

.slider-container {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.menu {
  position: absolute;
  left: 0;
  z-index: 900;
  width: 100%;
  bottom: 0;
}

.menu label {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50px;
  margin: 0 .2em 1em;
  position: relative;
}
.menu label:hover {
  background: red;
}
.menu label:before {
  content: "";
  width: 16px;
  height: 16px;
  background: red;
  border-radius: 50px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.menu label.current {
  background: red;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 10;
  padding: 8em 1em 0;
  background-size: cover;
  background-position: 50% 50%;
  transition: left 0s .75s;
}

[id^="slide"]:checked + .slide {
  left: 0;
  z-index: 100;
  transition: left .65s ease-out;
}

[id^="slide"]:checked + label:before {
  z-index: 100;
}

.slide-1 {
  background-image: url("https://source.unsplash.com/t7YycgAoVSw/1600x900");
}

.slide-2 {
  background-image: url("https://source.unsplash.com/11H1SSVcIxc/1600x900");
}

.slide-3 {
  background-image: url("https://source.unsplash.com/OlZ1nWLEEgM/1600x900");
}

.information {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background: pink;
  text-align: left;
  transition: all .3s ease;
}
.information h3 {
  transition: all .5s ease;
  opacity: 1;
}

.information.minimize {
  right: -30%;
}
.information.minimize h3 {
  opacity: 0;
}

.nav label {
  width: 200px;
  height: 100%;
  display: block;
  position: relative;
  opacity: 1;
  z-index: 9;
  cursor: pointer;
  transition: opacity .2s;
  color: #FFF;
  font-size: 156pt;
  text-align: center;
  line-height: 380px;
  font-family: "Varela Round", sans-serif;
}

.nav .next {
  right: 0;
}

.intro {
  position: absolute;
  bottom: 25%;
  left: 0;
  width: 30%;
  background: #fff;
  text-align: left;
  padding-left: 150px;
}


/* make dots visible on white background */
.menu label {
  box-shadow: 0 0 .2em 0 #000;
}

<div class="slider-container">

  <div class="menu">
    <label for="slide-dot-1" class="dot-1"></label>
    <label for="slide-dot-2" class="dot-2"></label>
    <label for="slide-dot-3" class="dot-3"></label>
  </div>

  <input id="slide-dot-1" type="radio" name="slides" checked>
  <div class="slide slide-1">
    <div class="intro">
      <h5>Header</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio.</p>
    </div>
    <div class="information">
      <h1 class="clickable">++</h1>
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio. Integer tristique mi eget sem ultrices auctor. Nam quis tellus ac magna ornare ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl </h3>
      <div class="nav">
        <label for="slide-dot-2" class="next">&#x203a;</label>
      </div>
    </div>
  </div>

  <input id="slide-dot-2" type="radio" name="slides">
  <div class="slide slide-2">
    <div class="information">
      <h1 class="clickable">++2</h1>
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio. Integer tristique mi eget sem ultrices auctor. Nam quis tellus ac magna ornare ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl </h3>
      <div class="nav">
        <label for="slide-dot-3" class="next">&#x203a;</label>
      </div>
    </div>
  </div>

  <input id="slide-dot-3" type="radio" name="slides">
  <div class="slide slide-3">
    <div class="information">
      <h1 class="clickable">++3</h1>
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl sit amet, sodales odio. Integer tristique mi eget sem ultrices auctor. Nam quis tellus ac magna ornare ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget purus imperdiet, euismod nisl </h3>
      <div class="nav">
        <label for="slide-dot-1" class="next">&#x203a;</label>
      </div>
    </div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

CODEPEN

实际上，保持您的“纯CSS Slider”纯CSS是可能的，但正如您在问题中提到的：

我不介意添加更多的jQuery来实现这一点。

可以从这个CODEPEN中获得一些灵感，这是一个纯CSS滑块。它看起来不一样(实际上它也不一样)，但是看看HTML的骨架。你可以把剪贴画翻译成“每一个”模型。