Unslider next/prev問題當頁面上有多個滑塊時

Question

我正在使用Unslider，並且在頁面上有多個滑塊 - 所有滑塊都具有相同類別。如果通過點進行導航，滑塊工作 - 但下一個和上一個按鈕不起作用。 當在頁面上只有一個滑塊和我運行的console.log

$('.slider').each(function(){ 

    var data = $slider.data('unslider'); 
    console.log(data); 

}); 

我得到「Unslider」

如果在頁面我得到多個滑塊「未定義」 當點擊'下一個」或‘下一頁’

$('.unslider-arrow').click(function(){ 
     event.preventDefault(); 

     if ($(this).hasClass('next')) { 
      $slider.data('unslider')['next'](); 
      } else { 
      $slider.data('unslider')['prev'](); 
     }; 

    }); 

遺漏的類型錯誤：無法讀取屬性‘下一個’未定義 遺漏的類型錯誤的：無法讀取屬性‘下一頁’的不確定

我假設它與我寫這篇的方式做：

var data = $slider.data('unslider'); 

是否有人可以幫忙嗎？我不是專家，所以我認爲這可能是一個簡單的解決方案。

我的html是非常基本的，根據需要。

<div class="slider"> 
    <ul> 
     <li style="background-image:url(/assets/img/slide-test-3.jpg);"> 
      <span class="caption">Slide 1</span> 
     </li> 
     <li style="background-image:url(/assets/img/slide-test-1.jpg);"> 
      <span class="caption">Slide 2</span> 
     </li> 
     <li style="background-image:url(/assets/img/slide-test-2.jpg);"> 
      <span class="caption">Slide 3</span> 
     </li> 
    </ul> 

    <a href="#" class="unslider-arrow prev ss-icon ss-gizmo">Previous</a> 
    <a href="#" class="unslider-arrow next ss-icon ss-gizmo">Next</a> 
</div> 
<div class="slider"> 
    <ul> 
     <li style="background-image:url(/assets/img/slide-test-3.jpg);"> 
      <span class="caption">Slide 1</span> 
     </li> 
     <li style="background-image:url(/assets/img/slide-test-1.jpg);"> 
      <span class="caption">Slide 2</span> 
     </li> 
     <li style="background-image:url(/assets/img/slide-test-2.jpg);"> 
      <span class="caption">Slide 3</span> 
     </li> 
    </ul> 

    <a href="#" class="unslider-arrow prev ss-icon ss-gizmo">Previous</a> 
    <a href="#" class="unslider-arrow next ss-icon ss-gizmo">Next</a> 
</div> 

Answer 1

你應該初始化箭頭withing的each功能：

$('.slider').each(function(){ 
    var $slider = $(this).unslider(); 
    $(this).find('.unslider-arrow').click(function(event){ 
     event.preventDefault(); 
     if ($(this).hasClass('next')) { 
      $slider.data('unslider')['next'](); 
      } else { 
      $slider.data('unslider')['prev'](); 
     }; 
    }); 
}); 

Answer 2

上述解決方案並沒有爲我在多個滑塊工作，這個人做

$(document).ready(function(){ 
    $('.slider').each(function(){ 
     var $this = $(this); 
     $this.unslider({ 
      speed : 300, 
      delay : 10000, 
      complete : function() {}, 
      keys : false, 
      dots : true, 
      fluid : true 
     }).find('.unslider-arrow').click(function(event){ 
      event.preventDefault(); 
      if ($(this).hasClass('next')) { 
       $this.data('unslider').next(); 
      } else { 
       $this.data('unslider').prev(); 
      } 
     }); 
    }); 
});