问题描述:

I'm having an issue with my Owl Carousel on my page. Currently, the carousel container and items don't display. Iused my web inspector to check the element and it appears that it has the line display:none in the css. However, when I change this to display:block, the items show one under the other, rather than in a line horizontally.

My script for the carousel is as follows:

jQuery(function($){

$('.owl-carousel').owlCarousel({

loop:true,

margin:10,

nav:true,

dots:true,

autoplay:true,

autoplayHoverPause:true,

items:4,

responsive:{

0:{

items:1

},

480:{

items:2

},

768 :{

items:4

}

}

})

});

My HTML markup is as follows:

<div class="row owl-carousel container">

<div id="layers-widget-carousel-5-931" class="item layers-widget-carousel-931">

...

</div>

<div id="layers-widget-carousel-5-715" class="item layers-widget-carousel-715">

...

</div>

<div id="layers-widget-carousel-5-95" class="item layers-widget-carousel-95">

...

</div>

I have the scripts owl.carousel.min.js, owl.carousel.css and owl.theme.default.css loaded in the head (didn't work when loaded in the footer either).

Is there any obvious reason why this might not be working?

网友答案:

Hi I was in the same spot as you. I searched and searched and ended up here.

Just out of curiosity I updated the JS and CSS to the latest version. So that worked for me.

However, I also found this - Link to Github item

Hope this helps.

相关阅读:
Top