owl carousel flashing on page load

Question

I have several owl carousels running. When it first loads the carousel flashes at full width until the jquery kicks in and then resizes everything. Is there anyway to stop this? Here's my code:

Html

 <?php $k='1'; do { ?>
 <div id="owlslide<?php echo $k;?>">
     <?php do { ?>
       <div class="owlItem ">
         <-- some other stuff -->
       </div>
     <?php  } while();?>
 </div>
 <?php $i++; } while();?>

Jquery (owl)

 $(document).ready(function(){
<?php $i='1'; do { ?>
 $("#owlslide<?php echo $i;?>").owlCarousel({
  autoPlay: false, //Set AutoPlay to 3 seconds
  paginationNumbers: true,
   itemsCustom : [
    [0, 1],
    [450, 1],
    [600, 2],
    [700, 2],
    [1000, 3],
    [1200, 4],
    [1400, 4],
    [1600, 5]
  ],        
  });
<?php $i++; }while($cara = mysql_fetch_assoc($catCara)); ?>

});

Answer 1

You can hide the carousel items with display: none; in your CSS, then show them after the carousel has initialized by binding a handler to the initialized.owl.carousel event. I find it's best to combine it with a placeholder that has a loader gif to further reduce page jump.

var carousel = $('#owlslide');
carousel.on({

    'initialized.owl.carousel': function () {
         carousel.find('.item').show();
         carousel.find('.loading-placeholder').hide();
    }

}).owlCarousel(options);

Note that you have to bind the handler before you initialize the carousel.

Answer 2

still not a best solution, but if you set the opacity to 0, it will work at some level and all the items will not be there on page load.

.owl-carousel:not(.owl-loaded){ 
    opacity: 0; 
}

Answer 3

If you are using OwlCarousel2, the plugin attaches the CSS class .owl-loaded to the .owl-carousel after it has finished rendering the carousel items. Simply set display: none on the container and reset display: block on the appended class.

i.e. In your CSS file:

.owl-carousel {
    display: none; 
}

.owl-carousel.owl-loaded {
    display: block;
}

Answer 4

.owl-carousel:not(.owl-loaded){ 
    opacity: 0; 
    visibility:hidden;
    height:0;
}

Try this.