0

Unslider を使用しており、1 つのページに複数のスライダーがあり、すべて同じクラスのスライダーを使用しています。ドットを介してナビゲートする場合、スライダーは機能しますが、次と前のボタンは機能しません。ページにスライダーが 1 つしかなく、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']();
        };

    });

Uncaught TypeError: 未定義のプロパティ 'next' を読み取れません Uncaught 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>
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 に答える