Daniel Robinson Daniel Robinson - 7 months ago 91
Javascript Question

owl carousel flashing on page load

on this page

http://www.exclusivecard.co.uk/offers.php

I have several owl carousels running. You'll notice when you first load the page that all off the offers in the carousel flash at full width until the jquery kicks in and then resizes everything. Is there anyway to stop this? Ill post some of the code I'm using below

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]
],

//navigation:true,
// navigationText: [
// "<i class=' btn '>< Previous </i>",
// "<i class='btn '>Next ></i>"
// ],
});
<?php $i++; }while($cara = mysql_fetch_assoc($catCara)); ?>

});

Answer

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.