0

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

    });

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

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

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

2 回答 2

3

您应该使用以下功能初始化箭头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']();
        };
    });
});
于 2014-09-30T23:50:52.350 回答
0

上面的解决方案在多个滑块上对我不起作用，这个是

$(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();
            }
        });
    });
});
于 2015-01-24T15:28:22.407 回答