Search code examples
owl-carouselflashing

Owl carousel all items visible when page is loading


This problem occurs mainly when user is using a little bit slower internet or mobile for example. But flashing is sometimes also seen on higher speeds when page content / images in carousel hasn't been cached.

If page loads and first elements are being rendered, all carousel "slides" are under each other like a list, then page gets loaded, magic happens and every extra slide disappears and carousel has been born.

Is this default Owl behaviour? How should I solve this? This is very ugly-looking and unprofessional.


Solution

  • It's old question but i had the same problem recently.

    Problem is in class:

    <div id="yourowlcarouselid" class="owl-carousel owl-theme owl-loaded">
    

    Solution was to remove class "owl-loaded". Owl js add it by itself to render slider in block, without this, slider should have style "display:none". Except for no-js browser.

    Second thing is style for owl: Classes are in owl.carousel.css. Just follow "install guide" on OWL Carousel page.

    If there is none css and "loading glitch" is the only unwanted effect, add:

    .owl-carousel {
        display: none;
    }
    .no-js .owl-carousel {
        display: block;
    }
    .owl-carousel.owl-loaded {
        display: block;
    }