将自定义的下一张幻灯片按钮添加到 Unslider 脚本

Question

我使用 unslider.js 滑块脚本。顺便说一下，我可以推荐给大家。

我正在尝试在幻灯片中添加 'to next slide' 按钮。首先，我向按钮添加了与下一个箭头 link 中的 class 相同的 class。但是没用。

有没有可能做到这一点？

谢谢

**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

将自定义的下一张幻灯片按钮添加到 Unslider 脚本

Add custom next slide button to Unslider script

html

javascript

jquery

slider