页面上有多个滑块时取消滑块下一个/上一个问题 [英] Unslider next/prev issue when multiple sliders on page

问题描述

我正在使用Unslider，并且页面上有多个滑块-所有滑块都具有相同的类别.如果通过点导航，则滑块可以工作-但下一个和上一个按钮不起作用. 当页面上只有一个滑块并且我运行console.log

I am using Unslider and I have multiple sliders on a page - all with the same class of slider. The sliders work if navigating via the dots - but the next and prev buttons don't work. When there is only one slider on the page and i run console.log

$('.slider').each(function(){

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

});

我得到了'Unslider'

I get 'Unslider'

如果页面上有多个滑块，我会得到未定义" 并单击下一个"或上一个"

If there are multiple sliders on the page I get 'undefined' and when clicking 'next' or 'prev'

$('.unslider-arrow').click(function(){
        event.preventDefault();

        if ($(this).hasClass('next')) {
            $slider.data('unslider')['next']();
            } else {
            $slider.data('unslider')['prev']();
        };

    });

未捕获的TypeError:无法读取未定义的属性"next" 未被捕获的TypeError:无法读取未定义的属性"prev"

Uncaught TypeError: Cannot read property 'next' of undefined Uncaught TypeError: Cannot read property 'prev' of undefined

我假设这与我编写此代码的方式有关:

I am assuming it has to do with the way I am writing this:

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

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

Can someone please help? I am not a js expert so I think it might be an easy solve.

根据需要，我的html非常基本.

My html is pretty basic, as required.

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

推荐答案

您应该使用each函数初始化箭头:

You should init arrows withing the each function:

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

这篇关于页面上有多个滑块时取消滑块下一个/上一个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！