I have successfully implemented two owl carousels on my Shopify website, and they are both functioning properly. However, I am facing an issue with the navigation buttons on the second page. The navigation buttons seem to be picking up a style that I had intended for the first carousel:
.owl-theme .owl-controls .owl-buttons .owl-prev{
left: -45px;
top: 40%;
}
.owl-theme .owl-controls .owl-buttons .owl-next{
right: -45px;
top: 40%;
}
I am unsure of how to adjust the position of the navigation buttons for the second carousel, as they are currently displaying at the top of the page. Any guidance on resolving this would be greatly appreciated.
Both pages have the same JavaScript code:
<script>
$(document).ready(function () {
var carousel = $("#owl-demo");
carousel.owlCarousel({
items: 3,
margin:10,
navigation:true,
autoHeight : true,
autoPlay : 3000,
navigationText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"
],
});
});
</script>
The HTML structure is as follows:
<div class="wrapper-with-margin">
<div id="owl-demo" class="owl-carousel-design">
<div><img src="slider1.jpg" alt="" /></div>
<div><img src="slider2.jpg" alt="" /></div>
<div><img src="slider3.jpg" alt="" /></div>
</div>
</div>
I would appreciate any assistance in resolving this issue, as I plan to add more carousels to other pages once this is fixed.
Thank you in advance.