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

【问题标题】：Nivo Slider - Stop animation when only one imageNivo Slider - 只有一张图像时停止动画
【发布时间】：2012-05-04 16:25:42
【问题描述】：

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

【问题讨论】：

标签： javascript jquery image slider nivo-slider

【解决方案1】：

你能设置选项吗：

manualAdvance: true

这会有帮助吗？ This 是最新 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
    });
});

【讨论】：

当有多张照片时，不会将手动提前设置为 true 也会影响滑块。我想我可以检查项目的数量，然后相应地设置滑块。我将不得不对此进行调查并报告，感谢您指出该选项！
我完全同意你关于“手动”检查项目数量的观点......写一些代码并发布它，如果可以的话，我会尽力帮助你......
好吧，事实证明 nivo 滑块无论如何都不适合我，我需要一些可以处理不同尺寸图像并缩放它们而不失真的东西。
没错，我在处理不同尺寸的图像时遇到了完全相同的问题......检查lightbox，可能对你有帮助......我认为它类似于facebook。
我不希望图像弹出是问题，我需要用户能够看到页面的其余部分并在滑块移动时四处导航。滑块用于在用户环顾四周时在主页上显示图像。我发现的大多数灯箱库都会弹出图像并将其在屏幕上居中，同时使页面的其余部分变暗。

【解决方案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 之前检查图像的数量很重要，因为它似乎重复了图像标签...

【讨论】：

【解决方案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
                });
            }

【讨论】：