猫头鹰旋转木马2调整窗口bug的大小

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.

我决定在猫头鹰旋转木马2上做一个滑块。一切都很好，我喜欢，但我注意到了一个bug。当我改变浏览器窗口的大小(只有Chrome)时，滑动条项会被重新排列，在背面有一个幻像项。

HTML:

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]

(Codepen)

1 个解决方案

#1

Try this

试试这个

.owl-carousel .owl-item img {
  -webkit-backface-visibility: hidden;
}