Reputation: 1
owl carousel loading issue I am using jquery plugin owl-carousel I set up my carousel according to guide but it shows me owl-carousel loading(class added to dom owl-loading). I added my custom style or javascript code. Please help me in solving this problem. Thanks in advance.
html
<div id="owl" class="owl-carousel owl-theme partners_slider">
<!-- Partner Item -->
<div class="owl-item partner_item"><img src="./assets/img/client/partner_1.png" alt=""></div>
<!-- Partner Item -->
<div class="owl-item partner_item"><img src="./assets/img/client/partner_2.png" alt=""></div>
<!-- Partner Item -->
<div class="owl-item partner_item"><img src="./assets/img/client/partner_3.png" alt=""></div>
<!-- Partner Item -->
<div class="owl-item partner_item"><img src="./assets/img/client/partner_4.png" alt=""></div>
<!-- Partner Item -->
<div class="owl-item partner_item"><img src="./assets/img/client/partner_5.png" alt=""></div>
<!-- Partner Item -->
<div class="owl-item partner_item"><img src="./assets/img/client/partner_6.png" alt=""></div>
</div>
</div>
js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.js"></script>
<script src="./assets/js/owl.carousel.js"></script>
<script>
$(window).on('load',function(){
$('#owl').owlCarousel(
{
autoplay:true,
smartSpeed:1200,
lazyLoad : true,
nav:false,
dots:false,
responsive:
{
0:
{
items:1
},
480:
{
items:2
},
720:
{
items:3
},
991:
{
items:4
},
1199:
{
items:6
}
}
});
});
</script>
Upvotes: 0
Views: 3728
Reputation: 419
Try using setTimeout function on calling owlCarousel function.
setTimeout(function(){
$(".owl-carousel").owlCarousel()
},
2000);
Upvotes: 2