FirstFrost,
если делать по стандарту листает нормально ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.green.css" />
<style type="text/css">
.owl-carousel .item {
height: 10rem;
background-color: #FFFACD;
padding: 1rem;
position:relative;
border-right: 1px solid #FF1493;
}
.owl-carousel .owl-prev{
position:absolute;
top:0; left:0;
display:block;
height:99%;
width:90px;
background-color: transparent;
}
.owl-carousel .owl-next{
position:absolute;
top:0; right:0;
display:block;
height:99%;
width:130px;
background-color: transparent;
text-align: right;
}
.owl-carousel .owl-prev img{
height: 98%;
margin-left: -8px;
opacity: .1;
transition: .3s
}
.owl-carousel .owl-next img{
height: 98%;
transform: rotateY(180deg);
margin-right: -8px;
opacity: .1;
transition: .3s;
}
.owl-carousel .owl-prev:hover img{
opacity: 1;
}
.owl-carousel .owl-next:hover img{
opacity: 1;
}
.owl-carousel .owl-next.disabled img{
opacity: 0;
}
.owl-carousel .owl-prev.disabled img{
opacity: 0;
}
</style>
<title>Owl Carousel 2.1.0 Responsive by Geyan</title>
<script>
$(function() {
$(".owl-carousel").owlCarousel({
slideBy:5,
items: 5,
nav: true,
navText: ['<img src="http://aquantis.org/images/MenuSymbols/back2.png" alt="" />', '<img src="http://aquantis.org/images/MenuSymbols/back2.png" alt="" />'],
dots: false,
responsive:{
0:{
items:2,
slideBy:2
},
520:{
items:3,
slideBy:3
},
680:{
items:4,
slideBy:4
},
980:{
items:5,
slideBy:5
},
1200:{
items:5,
slideBy:5
}
}
})
});
</script>
</head>
<body>
<div class="owl-carousel">
<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>
</body>
</html>