Если в слайдере 1 элемент, то он дублируется много раз. Это не подходит. Посоветуйте, как можно реализовать корректное отображение всех слайдов при прокрутке по n-элементов, не зависимо от количества слайдов?
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<style>
.cats {
display: table;
width: 100%;
}
.cats .owl-carousel_wrapper {
width: 100%;
display: table;
table-layout: fixed;
}
.cats .owl-carousel_wrapper>#slider {
width: 100%;
position: relative;
z-index: 1;
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer {
overflow: hidden;
position: relative;
width: 100%;
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer .owl-item {
float: left;
overflow: hidden;
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer .owl-item .item {
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer .owl-item .item span {
display: block;
text-align: center;
}
</style>
</head>
<body>
<div class="cats">
<div class="owl-carousel_wrapper">
<div class="owl-carousel_cats owl-theme main" id="slider">
<div class="item">
<span>1</span>
</div>
</div>
</div>
</div>
<script>
$(window).on("load", function() {
var owl2 = $(".owl-carousel_cats");
owl2.owlCarousel({
navigation : false,
singleItem : true,
loop : true,
responsive:{
0:{
items:2,
slideBy:2,
nav:true
},
520:{
items:3,
slideBy:3,
nav:false
},
680:{
items:4,
slideBy:4,
nav:false
},
980:{
items:5,
nav:true,
slideBy:5
},
1200:{
items:5,
slideBy:5,
nav:false
}
},
transitionStyle : "fade",
autoplay: false,
autoplayTimeout: 4000,
autoplayHoverPause: true,
rewind: true,
navText: ["",""],
dots: false
});
})
</script>
</body>
</html>