javascript - 如何将类 "current"添加到纯 CSS slider 点导航？

Question

我有这个codepen我用一点点 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 属性检索到的更改输入索引

更深入的解释在注释良好的源代码中:

$(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，但正如您在问题中提到的:

I don't mind adding some more jQuery to achieve this.

请随意从中获取一些灵感 CODEPEN ，这是一个纯 CSS slider 。它看起来不同(实际上它也不同)但看看 HTML 骨架。您可以将骨架转换为“每个”模型。