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

Question

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?

Sulfide

Any console errors showing up, conflicts, etc? I use Owl Carousel a lot and nearly always run into an issue at some point or another... – Urgency

Can you make a jsfiddle? There might be a global css property for the element, but perhaps the script is set to only display one item at a time (is the style attribute being changed in the DOM). – Anjanetteanjela

@samuidavid yes you're right actually, I get an error referring to fancybox script - just removed it and it works - thanks for the hand!! – Sulfide

Nice, perhaps there was a jQuery conflict that prevented Owl from running? – Urgency

Answer 1

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

Callicrates

To be more specific, place the call after calling the owl.carousel.min.js file somewhere in the footer – Lightweight

Answer 2

With version 1.3.3 I had the same problem. I didn't see the carousel, because items had "display:none" in CSS. When I changed "display:none" into "display:block" I could see the items, but as a column.

I discovered, that the link to owl.carousel.js was in a wrong place, in the header. I moved it to the footer, and it solved the problem.

Varela

Answer 3

!!!Attention!!!

If u have this problem all u should do to solve it is to replace owl library before your scripts. Example:

<footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<!-- here goes your scripts -->
<script src="js/main.js"></script>
</footer>

Jurgen

Answer 4

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.

Whitcher

I had the same "non working" issue and solved it by abandoning version 2.2 of the carousel and reverting back to version 1.3. This isn't a good solution though, the current version should be fixed. I don't want to be mucking around with a plug-in just to get it working. – Unruly

Answer 5

only added for container display:none and carusel added display:block himself

Pronunciation

Answer 6

If you are calling owlCarousel() in a function, make sure the document is ready first. Example .js file:

(function ($) {
  function initOwlCarousel() {
    $('.owl-carousel').owlCarousel();
  }

  $(document).ready(function () {
    initOwlCarousel();
  });
})(jQuery);

Gottuard

Answer 7

Just add the scripts in the head tag instead of putting them at the end of body tag!

Schuman

Answer 8

Guys i found the solution. Your jquery file needs to be above your owl javascript file. That easy.

Just make sure your jquery is above everything cause it needs to be executed first.

Buffoon

When you say you found the solution, can you explain how you know that that is the solution? – Pinstripe

This seems to already be covered by other answers here – Peignoir

i made a video about it > youtube.com/watch?v=Or4pKNrk37s – Buffoon