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