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

Question

我已经成功地在我的shopify网站上添加了2个猫头鹰旋转盘，这些都工作得很好。唯一的问题是，在我的第二页上，旋转木马的导航按钮是从以下样式中拾取的(我需要它们用于第一个旋转木马的位置):

.owl-theme .owl-controls .owl-buttons .owl-prev{
  left: -45px;
  top: 40%; 
}
.owl-theme .owl-controls .owl-buttons .owl-next{
  right: -45px;
  top: 40%;
}

我不确定我需要做什么，以便在不同的位置显示导航，因为目前我有我的旋转木马，但我的导航显示在页面顶部的另一个位置。如果有人能告诉我需要做些什么来改变这一点。

以下是javascript代码(两页相同):

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

，下面是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>

如果有人能建议我如何解决这个问题，我真的很感激，因为我想添加更多的旋转木马到其他页面，但需要先解决这个问题。

Answer 1

是否可以在其中一个滑块上添加修饰符类?

你甚至可以这样做，如果你从两个页面调用相同的代码片段，只要确保，例如，如果第二页使用一个名为page.special.liquid的模板，那么…

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

然后在你的CSS上，在你的第一页轮询器的原始规则下面，根据你的需要修改值:

.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%;
}