Question

我正在使用bxslider创建我的图片幻灯片。图像正在动态更新。我的问题是即使只有一张图像，也会出现淡入淡出和淡出效果。我怎么能阻止这个？

bxslider选项

   var coverSlider = $('.bxslider').bxSlider({
        auto: true,
        minSlides: 1,
        maxSlides: 1,
        pager: false,
        speed: 500,
        pause: 3000,
        autoHover: true,
        mode: 'fade',
        controls: false
   })

我正在使用重新加载方法在追加或删除新图像时更新滑块

 coverSlider.reloadSlider();

Answer 1

这有助于我：

$(document).ready(function(){
  $('.bxslider').bxSlider({
    mode: 'fade',
    auto: ($(".bxslider li").length > 1) ? true: false,
    pager: ($(".bxslider li").length > 1) ? true: false,
    controls: false
  });
});

Answer 2

您应该在重新加载前检查图像数量，如果只有1张图像，请使用destroySlider()方法。

// Get the quantity of images (add your code if you want an example)
var numberOfImages = ...;

if (numberOfImages > 1) {
    coverSlider.reloadSlider();
} else {
    coverSlider.destroySlider();
}

Answer 3

尝试

var numImgs = $('div.myClassName img').length;
if(numImgs>1)
{
\\Do your bxslider reload here
}

相反，您可以使用Jquery Selector，如下所示

jQuery(".image").Length

希望这会有所帮助......

点击此处阅读选择器Click

Answer 4

var numImgs = $('div.bxslider img').length;
if (numImgs > 1) {
    $('.bxslider ').bxSlider({
        controls: true,
        ...
    });
}

Answer 5

此解决方案适合我改变自动：是的到

    auto: ($('#slidername').children().length < 2) ? false : true

感谢https://github.com/stevenwanderski/bxslider-4/issues/607

Answer 6

bx滑块：仅显示一张图像时如何禁用幻灯片放映？

将auto设置为false：

   var coverSlider = $('.bxslider').bxSlider({
        auto:false
   })

bx slider：如果仅存在一个图像，如何禁用幻灯片放映

6 个答案: