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

Question

I am using bxslider to create a slideshow of my images. The images are updating dynamically. My problem is the sideshow fade-in and fade-out work even only one image is present. How can I stop this ?

bxslider options are

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

I am using reload method to update the slider when a new image is appends or removes

 coverSlider.reloadSlider();

Answer 1

this helps me:

$(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

You should check the number of images before reloading, and use destroySlider() method if there is only 1 image.

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

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