7

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.

Solo
  • 6,687
  • 7
  • 35
  • 67

1 Answers1

0

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;
}
Dece
  • 24
  • 2