javascript - 最初のスライドの [前へ] ボタンを無効にしますか? ニヴォスライダー

Question

私が取り組んでいる Web プロジェクトにNivosliderを使用しています。

上記のリンクからわかるように、最初のスライドでも「前へ」ボタンが表示されます。

NivoSlider を「線形」にして、スライド番号が 0 より大きい場合にのみ前のボタンを表示することは可能ですか?

NivoSlider はデフォルトで「無限」または「円形」に設定されているようですが、これを変更する方法があるはずです。

これについて助けてくれてありがとう:-)

Answer 1

スライダーを初期化するときに、カスタム afterChange 関数を使用できます。

var sliderSelector = '#slider'; // Replace with your slider selector
$(sliderSelector).nivoSlider({
    // .. Other config here
    controlNav: true, // This solution relies on this to work
    afterChange: function() {
        // Hide prev button if on first slide
        if ($(sliderSelector + ' .nivo-controlNav .nivo-control:first').hasClass('active'))
            $(sliderSelector + ' .nivo-prevNav').hide();
        else
            $(sliderSelector + ' .nivo-prevNav').show();

        // Hide next button if on last slide
        if ($(sliderSelector + ' .nivo-controlNav .nivo-control:last').hasClass('active'))
            $(sliderSelector + ' .nivo-nextNav').hide();
        else
            $(sliderSelector + ' .nivo-nextNav').show();
    },
    afterLoad: function() {
        // If you have randomStart set to true, then you might check with what slide it started and act accordingly.
        // If you use the default, then this should be all you need
        $(sliderSelector + ' .nivo-prevNav').hide();
    }
});