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

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

如果您从两者中调用相同的代码段，您甚至可以执行此操作，例如，确保第二页使用名为tvshow_cat的模板然后...

page.special.liquid

然后在您的CSS上，低于您的第一页旋转木马的原始规则，根据您的需要修改值：

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

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

1 个答案: