Problem with navigation arrows in Owl Carousel

I have used WooCommerce Product Slider on several projects until recently on the last project I decided to use Owl Carousel which WCPS is based on it. I’m not a fan of dotted navigation and prefer to have the right/left arrows vertically in the middle and so I tried. While in development stage everything was fine when I queried the images from the database and placed them inside the carousel the previous arrow started to act strangely and no matter how much I tried it would stay on the left side of the carousel.

I tried everything and couldn’t find the problem. Of course, CSS was the first line of defense but it simply didn’t work. I even tried jQuery to forcefully push the button to the left side to no avail.

Finally, it occurred to me that this behavior only occurs when I use images with different heights and BAM as soon as I added a hight to the wrapper and overflow: hidden everything went great.

That went 10 hours laboring.

Also it’s important to notice that for RTL websites we must set the rtl parameter to true otherwise some of the slides won’t show up.

Leave a Reply

Your email address will not be published. Required fields are marked *