javascript - Nivo Slider - 画像が 1 つだけの場合はアニメーションを停止

Question

Nivo Slider の jQuery プラグインを使用していますが、画像が 1 つしか存在しない場合に移行を停止する方法を見つける必要があります。

Answer 1

オプションを設定できますか：

manualAdvance: true

それは役に立ちますか？これは、最新のNivoSliderアップデートのドキュメントです。

これで問題が解決しない場合は、スライダーを有効にするために使用しているコードを投稿できますか？

これは完全なコードになります：

$(window).load(function() {
    $('#slider').nivoSlider({
        slices: 1, // For slice animations
        startSlide: 0, // Set starting Slide (0 index)
        manualAdvance: true, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        randomStart: false, // Start on a random slide
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});

Answer 2

おそらくもっと良い方法がありますが、私にとってはうまくいきます：

if($('#slider img').length == 1) {
    $('#slider').nivoSlider({});
    $('.nivo-controlNav').css('display', 'none');
    $('.nivo-directionNav').css('display', 'none');
    $('#slider').data('nivo:vars').stop = true;
} else {
    $('#slider').nivoSlider({
        effect: 'slideInLeft'
    });
}

PS。画像タグが重複しているように見えるので、Nivosliderを初期化する前に画像の数を確認することが重要です...

Answer 3

単一の画像をキャプション付きで表示したかったので、答えはどれもうまくいきませんでした。画像の数に応じて nivoSlider を初期化するために、わずかに異なるオプションを使用することになりました (私の画像は、id 'hero-images' を持つ包含 div にありました)。

            var numImages = $('#hero-images img').length;

            if (numImages === 0) {
                //No images - hide the block
                $('#hero-images').hide();
            } else if (numImages === 1) {
                // 1 image - disable controls and set to manual advance to prevent animation
                $('#hero-images').nivoSlider({
                    directionNav: false,
                    manualAdvance: true,
                    controlNav: false
                });
            } else {
                // Multiple images, set up as normal
                $('#hero-images').nivoSlider({
                    effect: 'fade',
                    directionNav: false
                });
            }