页面上有多个滑块时取消滑块下一个/上一个问题答案

【问题标题】：Unslider next/prev issue when multiple sliders on page页面上有多个滑块时取消滑块下一个/上一个问题
【发布时间】：2014-09-30 23:36:37
【问题描述】：

我正在使用 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']();
        };

    });

未捕获的类型错误：无法读取未定义的属性“下一个” 未捕获的类型错误：无法读取未定义的属性 'prev'

我假设这与我写这篇文章的方式有关：

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

有人可以帮忙吗？我不是 js 专家，所以我认为这可能是一个简单的解决方案。

根据需要，我的 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>

【问题讨论】：

标签： jquery unslider

【解决方案1】：

您应该使用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']();
        };
    });
});

【讨论】：

【解决方案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();
            }
        });
    });
});

【讨论】：