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

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

Answer 2

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 3

Try

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

Instead you can use Jquery Selector too like below

jQuery(".image").Length

Hope this helps...

Click here to read about selectors Click

Answer 4

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

Answer 5

This solution works for me Change auto: true to

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

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

Answer 6

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

Set auto to false:

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