Я использую совую карусель для прокрутки карусели (v2.4).
при скольжении со стрелкой элементы слайда отображаются плохо.иногда он некорректно отображает изображение или текст ТОЛЬКО НА МОБИЛЬНЫХ УСТРОЙСТВАХ, iv'e воспроизводил ошибку как на Safari на iPhone, так и на Google Chrome на Samsung Galaxy Note 8. На рабочем столе он всегда работает как положено
css:
.owl-carousel, .owl-carousel .owl-item{-webkit-tap-highlight-color:transparent; position:relative}
.owl-carousel{margin:auto;width:100%!important;display:none; z-index:1}
.owl-carousel .owl-stage:after{content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0}
.owl-carousel .owl-stage-outer{position:relative; overflow:hidden;}
.owl-carousel .owl-stage-outer:after{ content: ""; position:absolute; left: 0; top: 0; width: 2px; height: 54px; background: #fff;}
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled{display:none}
.no-js .owl-carousel, .owl-carousel.owl-loaded{display:block}
.owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev{cursor:pointer; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none}
.owl-carousel.owl-loading{opacity:0; display:block}
.owl-carousel.owl-hidden{opacity:0}
.owl-carousel.owl-refresh .owl-item{visibility:hidden;}
.owl-carousel.owl-rtl{direction:rtl}
.owl-carousel.owl-rtl .owl-item{float:right; }
.owl-next, .owl-prev{background-position:0 0}
.owl-carousel{position:relative; z-index:1; height:100%; width:100%}
.owl-nav{text-align:center; margin-top:20px;}
.owl-next, .owl-prev{background-color:transparent; border-radius:0; height:40px; width:15px; text-align:center; line-height:40px; font-size:30px; -webkit-transition:0.4s; -moz-transition:0.4s; -o-transition:0.4s; transition:0.4s; color:#000; display:inline-block; margin:0 5px; position:absolute; top:50%; margin-top:-20px;}
.owl-next:hover, .owl-prev:hover{ background-color:transparent}
.owl-dots{ display:none;}
.new_slider a{ text-decoration:none;}
.new_slider .owl-next{ background:#f5f5f5 url(/images/leftarrow.png) no-repeat center center ; height: 76px; width: 40px; background-size: 20px 20px; position:absolute; left: 0; right: auto; top: -15px; bottom: 0; margin-top: 0;margin:0; }
.new_slider .owl-prev{ background: #f5f5f5 url(/images/rightarrow.png)no-repeat center center; height: 76px; width: 40px; background-size: 20px 20px; position:absolute; right: 0; left: auto; top: -15px; bottom: 0; margin-top: 0;margin:0;}
.new_slider .owl-next i, .new_slider .owl-prev i{ display:none;}
.new_slider .item span{ display: block; line-height: 16px;}
.new_slider .owl-item, .new_slider .owl-item.active, .owl-item.center {filter: gray;-webkit-filter: grayscale(1);-webkit-filter: grayscale(100%);filter: url(resources.svg#desaturate); filter: grayscale(100%);}
.new_slider .owl-item, .new_slider .owl-item.active.center{ filter: gray; -webkit-filter: grayscale(1); -webkit-filter: grayscale(100%);filter: url(resources.svg#desaturate); filter: grayscale(100%);}
.new_slider .owl-item. img{ filter: gray; -webkit-filter: grayscale(1); -webkit-filter: grayscale(100%);filter: url(resources.svg#desaturate); filter: grayscale(100%);}
.new_slider .owl-prev.disabled,.new_slider .owl-next.disabled {-webkit-filter: grayscale(100%);filter: grayscale(100%);opacity: 0.2;}
javascript:
var owl3 = $('.CarouselOwl4');
owl3.owlCarousel && owl3.owlCarousel({
margin: -32,
rtl: true,
nav: true,
loop: false,
autoplay: false,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
responsive: {
0: { items: 3 },
480: { items: 3 },
544: { items: 3 },
768: { items: 4 },
992: { items: 6 },
1200: { items: 6 }
}
})
и вот как это выглядит после нескольких прокруток вправо или влево:
