I decided to make a slider on Owl Carousel 2. Everything works fine, I like it, but I've noticed a bug. When I change the size of the browser window (only Chrome), the slider items are rearranged and there is a phantom item on back side.
HTML:
<div class="owl-carousel">
<img src="http://placehold.it/320x240?text=Slide%200">
<img src="http://placehold.it/320x240?text=Slide%201">
<img src="http://placehold.it/320x240?text=Slide%202">
<img src="http://placehold.it/320x240?text=Slide%203">
</div>
Script:
$(".owl-carousel").owlCarousel({
loop: true,
margin: 20,
items: 3,
nav: true,
});
Screenshot:
How can I fix it?
[Codepen]
Try this
.owl-carousel .owl-item img {
-webkit-backface-visibility: hidden;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With