javascript - Nivo Slider - 只有一张图像时停止动画

Question

我正在为 Nivo Slider 使用 jQuery 插件，并且需要找到一种方法来阻止它在仅存在一个图像时进行转换。

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
                });
            }