ligisayan,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css">
<link rel="stylesheet" type="text/css" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<style type="text/css">
.owl-carousel .item {
height: 10rem;
background: #4DC7A0;
padding: 1rem;
position:relative;
}
.owl-carousel .owl-prev{
position:absolute;
top:0; left:0;
display:block;
height:99%;
width:90px;
background:red;
}
.owl-carousel .owl-next{
position:absolute;
top:0; right:0;
display:block;
height:99%;
width:90px;
background:red;
}
.owl-prev,.owl-next{
opacity:0;
}
.prev:after, .next:after{
content: attr(class);
}
.prev,.next{
display: inline-block;
}
</style>
<title>Owl Carousel 2.1.0 Responsive by Geyan</title>
<script>
$(function() {
var owl = $('.owl-carousel').owlCarousel({
stagePadding: 100,
loop: true,
margin: 10,
nav:true,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true,
responsive: {
0: {
items: 1
},
470: {
items: 3
},
768: {
items: 4
},
1199: {
items: 5
}
}
});
$('body').on('click', '.prev, .next',function(event) {
event.preventDefault();
$(this).is('.prev') ? owl.trigger('prev.owl.carousel') : owl.trigger('next.owl.carousel')
})
})
</script>
</head>
<body>
<div class="owl-carousel">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
<div class="item">
<h4>7</h4>
</div>
<div class="item">
<h4>8</h4>
</div>
<div class="item">
<h4>9</h4>
</div>
<div class="item">
<h4>10</h4>
</div>
<div class="item">
<h4>11</h4>
</div>
<div class="item">
<h4>12</h4>
</div>
</div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="prev"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div>
<div class="next"></div></body>
</html>