Question

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

我正在尝试在幻灯片中添加“下一张幻灯片”按钮。首先，我将相同的类添加到按钮中，作为下一个箭头链接中的类。但它不起作用。

有可能这样做吗？

谢谢

private void PART_ContentHost_ContextMenuOpening(object sender, ContextMenuEventArgs e)
    {
        e.Handled = true;
    }

    private void Border_ContextMenuOpening(object sender, ContextMenuEventArgs e)
    {

    }

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脚本

2 个答案: