带有 addClass 问题的 bxslider 无限循环

Question

我目前正在使用 bxSlider，我遇到了无限循环问题。我添加了 class 并单击了 div，如果您单击下一个或上一个按钮，addClass 将处理下一个 div。但问题是，在显示 1 到 5 的 div 之后，然后在第 2 个循环时，addClass 不起作用。我在 bxSlider 中阅读了很多关于无限循环的问题，但我不确定它是否与我的问题相同。如果有人和我有同样的问题，请分享。

 $(document).ready(function(){
  $('.bxslider').bxSlider({
   useCSS:false,
   pager: false,
   startSlide:0,
   minSlides:1,
   maxSlides:3,
   moveSlides:1,
   slideWidth: 170,
   slideMargin: 10,
   infiniteloop: true,
   useCSS: false,
  }); 
  
  
  //click div 
  $(".bxslider div").on("click", function(){
   var $this = $(this);
   $('.bxslider div.slide.on').removeClass('on');
   $this.addClass('on')
  });
  
  //click before button
  $('.bx-wrapper .bx-prev').on("click touched", function(){
   var next = $('.bxslider div.slide.on');
   $('.bxslider div.slide.on').removeClass('on');
   next.prev().addClass('on');
  });
  
  //click next button
  $(".bx-wrapper .bx-next").on("click touched", function(){
   var next = $('.bxslider div.slide.on');
   $('.bxslider div.slide.on').removeClass('on');
   next.next().addClass("on");
  });
 });

 <style>
  .bxslider {}
  .bxslider div.slide {height:100px;background-color:#ededed;}
  .bxslider div.slide.on{background-color:#ff8888;}
 </style>

 <div class="bxslider">
  <div class="slide on"><span>slide01</span></div>
  <div class="slide"><span>slide02</span></div>
  <div class="slide"><span>slide03</span></div>
  <div class="slide"><span>slide04</span></div>
  <div class="slide"><span>slide05</span></div>
 </div>

Answer 1

第二个循环不起作用的原因是 bxSlider 在设置为 infiniteloop 时会创建滑块的克隆。详细信息在代码段中进行了评论。

片段

$(document).ready(function() {

  // Store bxSlider object for easy access to methods
  var bx = $('.bxslider').bxSlider({
    useCSS: false,
    pager: false,
    startSlide: 0,
    minSlides: 1,
    maxSlides: 3,
    moveSlides: 1,
    slideWidth: 170,
    slideMargin: 10,
    infiniteloop: true,

    /* Next 5 options are touch related features
    || BTW, there's no such event called touched.
    || Use these options instead of registering
    || bxSlider to events, use the bxSlider API
    || callbacks
    */
    touchEnabled: true,
    swipeThreshold: 50,
    oneToOneTouch: true,
    preventDefaultSwipeX: true,
    preventDefaultSwipeY: false,

    /* Use a callback: Right before the transition to the
    || next slide has ended...
    */
    onSlideBefore: activate,
  });

  /* ...call activate function to handle class 
  || toggling of slides
  */
  function activate($ele, from, to) {

    // Remove the .on class from ALL SLIDES
    $('.slide').removeClass('on');

    // Add .on class to the next .slide
    $ele.addClass('on');
  }
});

.bxslider {}

.bxslider div.slide {
  height: 100px;
  background-color: #ededed;
}

.bxslider div.slide.on {
  background-color: #ff8888;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">




<div class="bxslider">
  <div class="slide on"><span>slide01</span></div>
  <div class="slide"><span>slide02</span></div>
  <div class="slide"><span>slide03</span></div>
  <div class="slide"><span>slide04</span></div>
  <div class="slide"><span>slide05</span></div>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/g/bxslider@4.2.12(jquery.bxslider.min.js+vendor/jquery.fitvids.js)"></script>

带有 addClass 问题的 bxslider 无限循环

bxslider infiniteloop with addClass issue

jquery

bxslider