Struggling to implement two owl carousels on my page.
Gif: View Gif Here
The first carousel (shown at the top in the gif) is functioning perfectly.
However, the second one (beneath the first in the gif) is not behaving as expected. Instead of displaying 2 images, it's showing 4. Not sure how to fix this issue.
Working Carousel:
<body>
<!-- MENU-->
<section>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="img/image1.jpg">
</div>
...
</div>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
loop:true,
responsive: {
...
},
autoplay: true,
autoplayTimeout: 1500
});
})
</script>
</section>
Problematic Carousel:
<header>
<div class="owl-carousel owl-theme">
<div class="item"><img src="/img/Group 1.jpg" alt="slide1" /></div>
<div class="item"><img src="/img/Group 2.jpg" alt="slide1" /></div>
</div>
<script>
$('.owl-carousel').owlCarousel({
loop:true,
margin:0,
nav:true,
dots:true,
responsive:{
...
}
})
</script>
<!--Script HEADER-->
...
</header>