bxslider infiniteloop addClass問題

Question

我目前使用bxSlider，並且遇到無限循環問題。 我添加類去div被點擊，如果你點擊下一個或上一個按鈕，addClass正在與下一個div。但問題是，它顯示1到5的div後，然後當它是第二個週期，addClass不起作用。我在bxSlider中用無限循環閱讀了很多問題，但我不確定它和我的問題一樣。如果有人與我有同樣的問題，請分享。

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

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

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

Answer 1

爲什麼第二個週期是不工作的原因是因爲當它被設置爲infiniteloop bxSlider將創建滑塊的克隆。詳細信息在Snippet中進行了評論。

代碼片段

$(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>