javascript - 如何使用不同页面上的多个 Owl Carousel 来更改按钮的位置

Question

我已经成功地在我的 shopify 网站上添加了 2 个 Owl 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%;
}

而且我不确定我需要做什么才能在不同的位置显示导航，因为目前我有轮播，但我的导航显示在页面顶部的另一个位置。如果有人可以建议我需要做些什么来改变这一点。

以下是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

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

如果您从两个页面调用相同的代码段，您甚至可以这样做，例如，只要确保第二个页面使用名为 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%;
}