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

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