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']();
        };

    });

未捕获的TypeError：无法读取未定义的属性“next” 未捕获的TypeError：无法读取未定义的属性“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>

Answer 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']();
        };
    });
});

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();
            }
        });
    });
});

当页面上有多个滑块时，取消定位下一个/上一个问题

2 个答案: