<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;
}
.owl-dots {
display: none;
}
</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 class="item">
<span>2</span>
</div>
<div class="item">
<span>3</span>
</div>
<div class="item">
<span>4</span>
</div>
<div class="item">
<span>5</span>
</div>
<div class="item">
<span>6</span>
</div>
<div class="item">
<span>7</span>
</div>
<div class="item">
<span>8</span>
</div>
<div class="item">
<span>9</span>
</div>
<div class="item">
<span>10</span>
</div>
<div class="item">
<span>11</span>
</div>
<div class="item">
<span>12</span>
</div>
<div class="item">
<span>13</span>
</div>
<div class="item">
<span>14</span>
</div>
</div>
</div>
</div>
<script>
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,
loop:false
},
1200:{
items:5,
slideBy:5,
nav:false,
loop:false
}
},
transitionStyle : "fade",
autoplay: false,
autoplayTimeout: 4000,
autoplayHoverPause: true,
rewind: true,
navText: ["",""]
});
</script>
</body>
</html>