javascript - 如何在基本js slider 上循环播放幻灯片

Question

我有一个带有“上一个”和“下一个”按钮的基本 slider ，我试图弄清楚如何滚动幻灯片以及在循环时向相关幻灯片添加/删除类。请给我一些帮助。

这是我到目前为止所拥有的，我希望上一个和下一个链接可以循环浏览幻灯片，添加和删除类。希望这是有道理的。

谢谢。

代码笔:https://codepen.io/ukscotth/pen/LYERPvJ

HTML

<div class="slider-container">

  <div class="slide show" data-index="1">   
    <div class="image-container">
      <div class="image" style="background-image:url('https://images.pexels.com/photos/3233372/pexels-photo-3233372.jpeg');">
      </div>
    </div>   
    <div class="info-container">
      <h1>Slide 1 Title</h1>
      <h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</h4>
    </div>   
  </div>

   <div class="slide" data-index="2">   
    <div class="image-container">
      <div class="image" style="background-image:url('https://images.pexels.com/photos/3268443/pexels-photo-3268443.jpeg');">
      </div>
    </div>   
    <div class="info-container">
      <h1>Slide 2 Title</h1>
      <h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</h4>
    </div>   
  </div>

<div class="prev-button">PREV</div>
<div class="next-button">NEXT</div>
</div>

CSS

.slider-container {
  width:100%;
  padding:50px;
}

.slide {
  position:absolute;
  opacity:0; 
}
.slide.show {
  opacity:1; 
}

.image-container{
  display: inline-block;
  margin-right:30px;
}

.image {
  width:300px;
  height:300px;
  background-size:cover;
}

.info-container{
  display: inline-block;
  width:300px;
  vertical-align: top;
}

.prev-button{
  position:absolute;
  top:400px;
  left:150px;
}
.next-button{
  position:absolute;
  top:400px;
  left:250px;
}

JS

(function($) {
  "use strict";

  var count;
  $count = 1;

  $('.next-button').click(function(e) {
    $('.slide[data-index=2]').addClass('show');
  });                         

})(jQuery);

Answer 1

如下所示替换下一个和上一个函数，它就可以工作了。你只需要使用一个简单的逻辑......

          $('.next-button').click(function(e) {  


        if(active==4){
          prev = 4; active = 1; next = 2;
          $('.slide[data-index='+active+']').addClass('show');
          $('.slide[data-index='+prev+']').removeClass('show'); 
        } else {

            $('.slide[data-index='+active+']').removeClass('show'); 
            $('.slide[data-index='+next+']').addClass('show'); 
            if (prev == 4) {
                prev = 0;
            }
            prev++; 
            active++;
            next++;
        }

        console.log('prev'+prev);
        console.log('active'+active);
        console.log('next'+next);
      });

      $('.prev-button').click(function(e) {  

        if(active==1){
          prev = 3; active = 4; next = 1;
          $('.slide[data-index='+active+']').addClass('show');
          $('.slide[data-index='+next+']').removeClass('show'); 
        } else {
            $('.slide[data-index='+active+']').removeClass('show'); 
            $('.slide[data-index='+prev+']').addClass('show'); 
            prev--; 
            active--;
            if (next == 1) {
                next = 5;
            }
            next--;
        }


        console.log('prev'+prev);
        console.log('active'+active);
        console.log('next'+next);
      });