<div class="relative px-12">
<div class="owl-carousel js-carousel1Classname">
<div class="carousel-item">
<img src="https://via.placeholder.com/200" alt="">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/200" alt="">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/200" alt="">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/200" alt="">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/200" alt="">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/200" alt="">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/200" alt="">
</div>
</div>
<div class="js-carousel1Classname-nav-container absolute inset-0 flex justify-between items-stretch mb-8"></div>
</div>
$('.js-carousel1Classname').owlCarousel({
center: true,
loop: true,
margin: 10,
nav: true,
dotsClass: 'owl-dots h-8 flex items-center justify-center',
dotClass: 'owl-dot',
navContainer: '.js-carousel1Classname-nav-container',
navClass: [
'owl-prev flex items-center px-4',
'owl-next flex items-center px-4'
],
navText: [
'<i class="fal fa-angle-left text-lg-2 md:text-lg-4"></i>',
'<i class="fal fa-angle-right text-lg-2 md:text-lg-4"></i>'
],
responsive: {
0: {
items: 3,
},
[BUNN.screens.md]: {
items: 5,
}
}
});