html
<html>
<head>
<meta charset="utf-8">
<title>Owl carousel slider</title>
<link rel="stylesheet" href="/new/owl.carousel.min.css">
<link rel="stylesheet" href="/new/owl.theme.default.min.css">
<style type="text/css">
.wrapper {width:100%; height: auto;overflow: hidden;min-width: 2500px;}
.item {height:auto; margin-right:60px; margin-left:4.5%;}
.owl-theme .owl-dots .owl-dot span {position:relative; width: 20px; height:3px; border-radius: 0;bottom: 30px; background: #000000}
.prvBtn {position:absolute;top:45%; left: 140px;z-index: 1;}
.nxtBtn {position:absolute;top:45%; right:140px;z-index: 1;}
</style>
</head>
<body>
<div class="wrapper">
<div class="owl-carousel sliderWapper owl-theme">
<div class="item"><img src="/images/cats2.jpg"></div>
<div class="item"><img src="/images/cats.jpg"></div>
<div class="item"><img src="/images/cats3.jpg"></div>
<div class="item"><img src="/images/cats.jpg"></div>
<div class="item"><img src="/images/cats4.jpg"></div>
</div>
<div class="sliderControl">
<div class="owl-controls">
<div class="owl-nav">
<div class="prvBtn"><img src="/new/prev.png" height=65px width=65px></div>
<div class="nxtBtn"><img src="/new/next.png" height=65px width=65px></div>
</div>
<div class="owl-dots">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>
</div>
</div>
<script src="/new/jquery-3.4.1.min.js"></script>
<script src="/new/owl.carousel.min.js"></script>
<script src="/new/jquer1.js"></script>
</body>
</html>
jqeur1
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop:true,
autoplay:2500,
margin:10,
nav:false,
responsiveClass:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
},
9000:{
items:1
}
}
})
});
var owl = $('.sliderWapper');
owl.owlCarousel();
// Go to the next item
$('.nxtBtn').click(function() {
owl.trigger('next.owl.carousel');
})
// Go to the previous item
$('.prvBtn').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
owl.trigger('prev.owl.carousel', [300]);
})
Please help! been struggling on this for weeks and note that I used "min-width: 2500px" in wrapper because if not it doesn't fit my page.