How to get bxSlider to hide the slides until the page loads?

Question

I'm building an website that uses bxSlider.

As the page loads, all of the slides are visible, stacked on top of each other. Once the page is fully loaded, the first slide remains visible and the rest disappear so that the slider can animate and display them one at a time.

I've tried using various CSS and bxSlider callbacks to hide the slides until the page fully loads, but no luck. Does anyone know how to do this?

Thanks!

Answer 1

bxslider has a callback when the slider is loaded (onSliderLoad).I set visibility to hidden on a container div and then use the callback to set the visibility to "visible."

<div id="siteslides" style="visibility: hidden;"></div>

$(".site_banner_slider").bxSlider({
    auto: true,
    slideWidth: $imageWidth,
    mode: 'fade',
    onSliderLoad: function(){
        $("#siteslides").css("visibility", "visible");
      }
  });