1

idangero.usスライダーを使用しています。ページに複数のスライダーがあります。スライダーに次/前のボタンを追加する必要があります。これが私の現在の実装です。以下の問題は、クリック イベントがページ上のすべてのスライダーを呼び出すことです。複数のインスタンスがある場合に swipePrev および swipeNext 関数を使用する最良の方法は何ですか。

    $('.swiper-container').each(function () {

    var prevNext = "<a class='arrow-left' href='#'></a><a class='arrow-right' href='#'></a>"; 
    var config = {
      mode: 'horizontal',
      calculateHeight: true,
      initialSlide: 0,
      visibilityFullFit: true
    };

    if ($(this).find('.swiper-wrapper').children().length > 1) {
      $(this).prepend(prevNext);
      var $pager = $('<div class="pagination" />').appendTo(this);
      config.pagination = $pager[0];
      config.paginationClickable = true;
    }

    var swiper = $(this).swiper(config);

    $('.arrow-left').on('click', function (e) {
        e.preventDefault();
        swiper.swipePrev();
    });

    $('.arrow-right').on('click', function (e) {
        e.preventDefault();
        swiper.swipeNext();
    });

  });
4

2 に答える 2

2

このようにブロックの複数のインスタンスを作成します 

<div class="device">
<a class="arrow-left" href="#"></a> 
<a class="arrow-right" href="#"></a>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"> <img src="img/slider1-1.png"> </div>
    <div class="swiper-slide"> <img src="img/slider1-2.png"> </div>
  </div>
</div>
<div class="pagination"></div>
</div>

そして、この js をオブジェクト配列とナイスfind()セレクターと共に使用します。

var swipes = []
$('.swiper-container').each(function(i, obj) {
swipes[i] = new Swiper(obj);

$(this).parent().find('.arrow-left').on('click', function(e){
  e.preventDefault()
  swipes[i].swipePrev()

})    

$(this).parent().find('.arrow-right').on('click', function(e){
  e.preventDefault()
  swipes[i].swipeNext()    
})  


});
于 2014-03-13T22:37:55.323 に答える