將自定義下一個幻燈片按鈕添加到Unslider腳本

Question

我使用unslider.js滑塊腳本。順便說一句，我可以推薦給大家。

我正試圖在幻燈片中添加'下一張幻燈片'按鈕。 首先，我在按鈕上添加了與下一個箭頭鏈接類相同的類。但它不起作用。

有沒有可能做到這一點？

謝謝

**JS** 
      var unslider = $('.banner').unslider({ 

     complete: function() {}, 
     keys: true, 
     dots: false, 
     fluid: false, 
     nav: false 
    }); 

    $('.unslider-arrow').click(function() { 
     var fn = this.className.split(' ')[1]; 

     unslider.data('unslider')[fn](); 
    }); 


**HTML snippet** 

<a href="" class="unslider-arrow">To next slide</a> 

http://jsfiddle.net/qATC9/45/

Answer 1

首先你需要設置一個href這樣的：

<a href="javascript:void(0)" class="unslider-arrow">To next slide</a> 

防止導航。然後在jQuery的

$('.unslider-arrow').click(function() { 
    unslider.data('unslider').next(); 
}); 

看到updated FIDDLE

Answer 2

可能，這將幫助你

只需使用此代碼

<div class="row"> 
<div class="col-md-12"> 
    <div class="banner-wrapper"> 
    <div class="banner"> 
     <ul> 
      <li> <a href="#" class="unslider-arrow next">To next slide</a><img src="https://picjumbo.imgix.net/HNCK0785.jpg?q=40&w=1650&sharp=30" /></li> 
      <li> <a href="#" class="unslider-arrow next">To next slide</a><img src="https://picjumbo.imgix.net/HNCK0785.jpg?q=40&w=1650&sharp=30" /></li> 
      <li> <a href="#" class="unslider-arrow next">To next slide</a><img src="https://picjumbo.imgix.net/HNCK0785.jpg?q=40&w=1650&sharp=30" /></li> 

     </ul> 
     <div class="banner-controls"> 
      <a href="#" class="unslider-arrow prev">&larr;</a> 
      <a href="#" class="unslider-arrow next">&rarr;</a> 
     </div> 
    </div> 
    </div> 
</div> 

Check it here on FIDDLE