Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Owl Carousel css set to display:none when page has loaded

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?

like image 337
Sam Skirrow Avatar asked Nov 16 '15 11:11

Sam Skirrow


People also ask

How do you turn off auto slide on Owl carousel?

In order to stop owl auto play you can trigger the corresponding event: stop. owl.

How do you change transitions in Owl carousel?

Use transitionStyle option to set transtion. There are four predefined transitions: "fade" , "backSlide" , goDown and scaleUp . You can also build your own transition styles easily. For example by adding "YourName" value transitionStyle: "YourName" , owlCarousel will add .

Does owl carousel require jQuery?

To use Owl Carousel, you'll need to make sure both the Owl and jQuery 1.7 or higher scripts are included.


1 Answers

I was having this issue and it was because I forgot to add the js call at the end.

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});
like image 181
icortesi Avatar answered Oct 05 '22 14:10

icortesi