當只有活動的滑動條滑動時，同時滑動的多個滑塊

Question

我有多個滑塊，每個滑塊都在它自己的部分 - >文章中。我的問題是這樣的：當我點擊其中一個滑塊上的下一個或上一個按鈕時，所有滑塊同時開始滑動。

HTML：

<section id="section01"> 
     <article class="article01"> 
      <div class="wrapper"> 
       <ul class="slider"> 
        <li class="slide"></li> 
        <li class="slide"></li> 
        <li class="slide"></li> 
       </ul> 
      </div> 
      <img class="previous" src="images/arrow-transparent.png"> 
      <img class="next" src="images/arrow-transparent.png"> 
     </article> 
</section> 

CSS

.wrapper{ 
    height: 342px; 
    margin: 0 auto; 
    overflow: hidden; 
    width: 918px; 
} 

.slider{ 
    height: 342px; 
    position: relative; 
    width: 5000px; 
} 

.slide{ 
    float: left; 
    height: 342px; 
    position: relative; 
    width: 306px; 
} 

JS

/* slider */ 
$(function(){ 
    var i = 0; 
    $('.previous').click(function(){ 
     var currentSlides = $(this).parent().find('.slide'), 
     parent = $(this).parent().find('.wrapper ul li'); 
     i = --i -2 % currentSlides.length; 
     if(i - 3 >= -3) { 
      $('.slider').animate({'left' : -(parent.eq(i).position().left)}, 600); 
     } else { 
      i = 0; 
     } 
    }); 

    $('.next').click(function(){ 
     var currentSlides = $(this).parent().find('.slide'), 
     parent = $(this).parent().find('.wrapper ul li'), 
     current = i; 
     i = ++i + 2 % currentSlides.length; 
     if(i + 3 < currentSlides.length) { 
      $('.slider').animate({'left' : -(parent.eq(i).position().left)}, 600); 
     } else { 
      i = current; 
     } 
    }); 
}); 

我該如何解決這個問題？

Answer 1

我決定從我原來的職位完全拋棄了JavaScript代碼和最終使用這個代替：

$(function() { 
    $('article .wrapper').each(function(){ 
     var slider = $(this).find('.slider'), 
      parent = $(this), 
      step =855, 
      left = parseInt(slider.css('left'), 10), 
      max = parent.width() - slider.width(), 
      min = 0; 

     parent.find(".previous").click(function() { 
      if (left < 0) { 
       var newLeft = left + step; 
       left = (newLeft<min) ? newLeft : min; 
       slider.animate({ 
        "left": left + 'px' 
       }, "slow"); 
      } 
     }); 

     parent.find(".next").click(function() { 
      if (left > max) { 
       var newLeft = left - step; 
       left = (newLeft>max) ? newLeft : max; 
       slider.animate({ 
        "left": left + 'px' 
       }, "slow"); 
      } 
     }); 
    }); 
}); 

我也稍微修改CSS中的幾個要素的寬度，而現在這一切就像是用魅力。

Answer 2

這是因爲您正在選擇所有slider類元素，所以這將爲它們製作動畫。如果你選擇slide而不是？

$(function(){ 
    var i = 0; 
    $('.previous').click(function(){ 
     var currentSlides = $(this).parent().find('.slide'), 
     parent = $(this).parent().find('.wrapper ul li'); 
     i = --i -2 % currentSlides.length; 
     if(i - 3 >= -3) { 
      $('.slide').animate({'left' : -(parent.eq(i).position().left)}, 600); 
     } else { 
      i = 0; 
     } 
    });