Search code examples
jquerycsshideshowbxslider

bxSlider breaking after show()

I'm using bxSlider on ticker mode and have a pair of buttons that respectively hide and show it with

$('.bxslider').hide();

and

$('.bxslider').show();

and after show(), it does reappear, but it stops moving. The same thing happens if I try with any other divs it's contained in.

Playing with the CSS right on the example at http://bxslider.com/examples/ticker, adding display:none and then changing it back to display:block, does the same thing, so it's something about bxSlider itself rather than a mistake I'm making, but is there a way I can make it work? Or else a good alternative to hiding it in the first place? I don't want it clickable, so opacity isn't good enough.

Solution

  • You need to reinitialize slider on show().

    $( ".bxslider" ).show( function() {
    slider.reloadSlider();
});

    http://bxslider.com/examples/reload-slider-settings