如何在不同页面上使用多个猫头鹰轮播来更改按钮的位置

Question

I have successfully managed to add 2 owl carousels on my shopify site and these are both working fine. The only issue I have is that on my 2nd page the navigation buttons for the carousel are being picked up from the following style (the position I need them 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%;
}

And I am not sure what I need to do in order to display the navigation in a different position as currently I have my carousel but my navigation is showing in another position at the top of the page. If somebody could please advise on what I need to do to change this.

The following is the javascript code (same on both pages):

<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>

and the following is the HTML:

<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>

Would really appreciate it if somebody could advise on how I can fix this, as I would like to add more carousels to the other pages but need to fix this first.

Thanks in advance.

Answer 1

Is it possible to add a modifier class on one of these sliders?

You can even do it if you're calling the same snippet from both, just make sure that, for example, if the second page is using a template called page.special.liquid then...

<div class="wrapper-with-margin">
  <div id="owl-demo" class="owl-carousel-design {% if template contains 'special' %}owl-special{% endif %}">
    <div><img src="slider1.jpg" alt="" /></div>
    <div><img src="slider2.jpg" alt="" /></div>
    <div><img src="slider3.jpg" alt="" /></div>
  </div>
</div>

And then on your CSS, below your original rules for your 1st page carousel, modify the values as per your needs:

.owl-special .owl-theme .owl-controls .owl-buttons .owl-prev{
  left: -25px;
  top: 20%; 
}

.owl-special .owl-theme .owl-controls .owl-buttons .owl-next{
  right: -25px;
  top: 20%;
}