0

jQuery サイクルを使用して、ポートフォリオ ページに 4 つの個別のサムネイル スライドショーを作成しています。各スライドショーには、独自の次へ/前へのボタンがあります。しかし、すべての次/前のボタンは最初のスライドショーを進めるだけであり、それを修正する方法がわかりません。

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';
        }
    });
});
4

1 に答える 1

0

各ショーのコントロールを分離するには、各ショーをループし、各インスタンス内でコントロールを定義する必要があります。

/* 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-12T18:20:32.907 に答える