需要多个jQuery循环滑块才能使用不同的prev/next按钮

我正在使用jQuery循环在投资组合页面上构建4个单独的缩略图幻灯片。每个幻灯片都有它自己的next/prev按钮。但每下一个/上一个按钮只会推进第一个幻灯片，我不知道如何解决这个问题。需要多个jQuery循环滑块才能使用不同的prev/next按钮

HTML代码：（重复4次）

<div class="slider"> 
<div class="slides"> 
    <div> 
    <img src="images/portfolio/ident1.jpg" alt=""/> 
    <img src="images/portfolio/ident2.jpg" alt=""/> 
    <img src="images/portfolio/ident3.jpg" alt=""/> 
    <img src="images/portfolio/ident4.jpg" alt=""/> 
      </div> 
    </div><!--end of slides--> 
</div><!--end of slider--> 
<img src="images/arrow-L.png" alt="Left" class="slider-arrow-left"/> 
<img src="images/arrow-R.png" alt="Right" class="slider-arrow-right"/>

jQuery代码：

$(document).ready(function(){ 
    $(".call-button").toggle(
function() { 
$(this).animate({ left: "0" }, 1000); 
}, 
function() { 
$(this).animate({ left: "-225px" }, 1000); 
}); 

    $('.slides').cycle({ 
     fx:  'scrollHorz', 
     speed: 'slow', 
     timeout: 0, 
     nowrap: true, 
     pause: 1, 
     prev: $('.slider-arrow-left'), 
     next: $('.slider-arrow-right'), 
     cssBefore:{ 
      top: 0, 
      opacity: 1, 
      display: 'block' 
     }, 
     animOut: { 
      top: 360 
     }, 
     before: function(curr, next, opts){ 
      var $curr = $(curr); 
      var $next = $(next); 
     }, 
     pause: 1, 
     pager: '.slider-controls', 
     pagerAnchorBuilder: function (idx, slide) { 
      return '.slider-controls li:eq(' + idx + ') a'; 
     } 
    }); 
});

来源

2013-01-12 Molly Campbell

如果你想要做滑块，这个答案可能会有帮助：http://stackoverflow.com/a/12608357/1 428241 –

为了分离对照为分别示出将需要循环通过每个节目，并定义每个实例中的控件：

/* assumes you have "slider" DIV (parent() in code below) wrapped around each show*/ 
$('.slides').each(function(){ 
    /* look for controls only within this instance*/ 
    var nextBtn=$(this).parent().find('.slider-arrow-left'); 
    $(this).cycle({ 
     next: nextBtn 
     /* do same for pager and prev*/ 
    }) 
})

来源

2013-01-12 18:20:32 charlietfl

需要多个jQuery循环滑块才能使用不同的prev/next按钮

回答

相关问题