Owlcarousel2: All my owl item are active, no image displayed

[Goviral-studio]

Hi,

Sometimes when i load my page, my carousel doesn't display any image.

When i take a look a the html, i can see the class "active" on all my 'owl-item'
You can see it on screencapture below :

And my images size is set to 0 x 0 pixels

When i refresh the page the carousel displaying images correctly.

You can see it here, when you click on a real estate card : mywebsite

If someone can help me please.

Thanks.

Alex.

[ohepworthbell]

Can you paste your owlCarousel call? I know from experience that if you have autoheight enabled, sometimes the carousel executes before the image is loaded and so sets an initial height of '0'. When the carousel is dragged (either manually or using autoplay), the correct height is calculated. Delaying calling the owlCarousel function until all the images are loaded is the only workaround.

[Goviral-studio]

Here you can see my owlCarousel call. I don't use autoheight, only autoWidth. Owl-item's image urls are loaded with PHP. I will try to delaying my call.

Thanks for your contribution.

$jq("#slider-prog").owlCarousel({
    loop:true,
    nav:true,
    dots:false,
    autoWidth:true,


    navText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1,
        },
        900:{
            items:1,
        }
    }
});

[Goviral-studio]

setTimeout(function(){
        $jq("#slider-prog").owlCarousel({
            loop:true,
            nav:true,
            dots:false,
            autoWidth:true,


            navText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:1,
                },
                900:{
                    items:1,
                }
            }
        });
    }, 500);

I've tried to delay the call with a 'setTimeout', but it does not solve the problem. On first loading of the page all the 'owl-item' are always active (see screenshot on my first post) and nothing is displayed. After reloading my page with F5, the display is correct and I have only one active item left.

[gunvantaspl]

Seeing the same issue... On initial load, all owl-item element are load with active class and images are seeing vertically one under another. this problem arise first time loading after that work fine.

[valer0ck]

It happened to me when i used autoWidth option. Solved loading Carousel in this way

$(window).on('load',function() { 
// code
});

https://stackoverflow.com/questions/44189918/owl-carousel-autowidth-broken-on-initial-cache-refresh