[bxSlider] ページャーや左右ボタンが押されたら自動スライドを停止したい

公開日:2021/08/22

bxSliderで設置したスライダーを自動切り替えさせているときに、左右ボタンやページャーのクリックで手動操作されたら自動スライドを停止したい、という場合があります。

プラグインに用意されているAPIを使用することで、スライドの自動切り替えを停止することができます。

サンプルコード

jQuery(function($) {
    const slider = $('.slider').bxSlider({
        auto: true,
        controls: true,
        pager: true,
    });

    $('.slider .bx-controls').click( function() {
        slider.stopAuto();
    });
});

通常通りにbxSliderを起動し、スライダー本体を変数に格納しておきます。

スライダーの「bx-controls」クラス内の要素がクリックされたときに「stopAuto」関数を実行することで、スライダーの自動再生を止めることができます。

ページャーがクリックされたときにだけ自動スライドを停止したい

jQuery(function($) {
    const slider = $('.slider').bxSlider({
        auto: true,
        controls: true,
        pager: true,
    });

    $('.slider .bx-pager').click( function() {
        slider.stopAuto();
    });
});

左右ボタンのクリックでは自動スライドは維持し、ページャーがクリックされたときに自動スライドを停止させる場合のサンプルコードです。

クリックを検知する要素を「bx-pager」クラスに変更しています。

「bx-pager」クラス内のaタグを指定すると、自動スライドが停止されません。ご注意ください。

左右ボタンがクリックされたときにだけ自動スライドを停止したい

jQuery(function($) {
    const slider = $('.slider').bxSlider({
        auto: true,
        controls: true,
        pager: true,
    });

    $('.slider .bx-controls-direction').click( function() {
        slider.stopAuto();
    });
});

ページャーのクリックでは自動スライドは維持し、左右ボタンがクリックされたときに自動スライドを停止させる場合のサンプルコードです。

クリックを検知する要素を「bx-controls-direction」クラスに変更しています。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。