How to make BxSlider hide all slides until the page loads

I am using the latest bx slider for my website, but all slides visible and stacked on top of each other before the page loads. I have tried this one also
css

.ctaFtSlider{
   visibility: hidden;
   height: 0;
}

$(document).ready(function(){
     $('.bxslider').bxSlider({
           ...
           onSliderLoad: function(currentIndex){
           $(".ctaFtSlider").css("visibility", "visible");
           $(".ctaFtSlider").css("height", "auto");
        }
    });
});

when i did this the bx slider got hidden after page loads.

Solution

I use a function that delays making a webpage visible during loading. I need it to prevent FOUC (Flash Of Unstyled Content), but this might work for you as well.

Usage

CSS

Add this rule:

   body { visibility: hidden; }

HTML

Add this to `<body>` tag:

   <body onload="delay(1500);">

JS/jQ

    // t is in ms | 1000ms = 1sec

function delay(t) {
  setTimeout('initFadeIn()', t);
}

function initFadeIn() {
  $("body").css("visibility", "visible");
  $("body").fadeIn(500);
}

SNIPPET

$(function() {
  $('.bx').bxSlider({
    pager: false
  });
});

// t is in ms | 1000ms = 1sec

function delay(t) {
  setTimeout('initFadeIn()', t);
}

function initFadeIn() {
  $("body").css("visibility", "visible");
  $("body").fadeIn(500);
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>36646468</title>
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
  <style>
    body {
      visibility: hidden
    }
    img {
      margin: 0 auto;
      }
  </style>
</head>

<body onload="delay(1500);">

  <section class="bx">

    <div>
      <img src="http://placehold.it/320x180/000/fff?text=1">
    </div>

    <div>
      <img src="http://placehold.it/320x180/00f/fc0?text=2">
    </div>

    <div>
      <img src="http://placehold.it/320x180/fc5/ba6?text=3">
    </div>

    <div>
      <img src="http://placehold.it/320x180/0bb/0ff?text=4">
    </div>

    <div>
      <img src="http://placehold.it/320x180/f3a/52f?text=5">
    </div>

    <div>
      <img src="http://placehold.it/320x180/fff/000?text=6">
    </div>

  </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
  <script>
  </script>
</body>

</html>