Bx滑块:当只有一个图像存在时，如何禁用幻灯片显示

bx slider : how to disable slide show when only one image is present

本文关键字：何禁用 显示 幻灯片 存在 图像 滑块 有一个 Bx      更新时间：2023-09-26

我使用bxslider来创建我的图像的幻灯片。图像正在动态更新。我的问题是杂耍淡入和淡出的工作，即使只有一个图像是存在的。我怎样才能阻止它呢?

bxslider选项

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

我正在使用reload方法来更新滑块，当一个新的图像被追加或删除

 coverSlider.reloadSlider();

这对我有帮助:

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

在重新加载之前应该检查图像的数量，如果只有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();
}

Try 

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

你可以使用Jquery选择器，就像下面的

jQuery(".image").Length

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

这个解决方案适合我更改auto: true

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

Thanks to https://github.com/stevenwanderski/bxslider-4/issues/607

bx滑块:当只有一个图像存在时如何禁用幻灯片显示?

设置auto为false: 

   var coverSlider = $('.bxslider').bxSlider({
        auto:false
   })
相关文章：