CODEWITHSUNDEEP
owl-carouselflashing
Solo
Solo

Reputation: 6967

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.

Upvotes: 7

Views: 7227

Answers (2)

Rahul Narayankar
Rahul Narayankar

Reputation: 1

I tried the below solution and it's worked (All items are loading while the page is loading).

.owl-carousel{white-space:nowrap;visibility:hidden}
.owl-carousel.owl-loaded{visibility:visible}
.owl-carousel .owl-item{white-space:normal;display:inline-block;vertical-align:top}

Upvotes: 0

Dece
Dece

Reputation: 24

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

Upvotes: 0

Related Questions