Clever Geek Handbook

Why are my owl elements having width = 0px

I have an owl carousel issue when I try to include it with a website, although it works fine in my standalone prototype. Essentially instances owl-wrapper

and all owl-item

have a width of 0 inline and I can't figure out why.

If I manually remove the width of those items, it doesn't fix the carousel (although I'm not sure if I expected this either). I'm using a pretty basic owl carousel setup:

// Setup the owl-carousel slider once the document has loaded
$(document).ready(function () {
    $("#owl-slider").owlCarousel({
        autoPlay: 5000, //Set AutoPlay to 5 seconds
        singleItem: true,
        lazyLoad: true,
        lazyEffect: false
    });
})

If you visit this page , you can search owl-slider

the DOM and see this result, which is clearly wrong:

enter image description here

I've tried different things, lazy image loads using lorem pixel instead of inline images, but can't fix the site. However, I have a perfectly working JSFiddle prototype here. Can anyone provide me with a solution or any suggestions on what to continue?

+3


source to share


1 answer


It would seem that using float:left

on an owl carousel containing a div .sliderBox

is causing your problem.



Removing that style or setting the width for the div .sliderBox

should fix your problem.

+1


source






More articles:


All Articles