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

【问题标题】：How to change positions of buttons using multiple owl carousels on different pages如何使用不同页面上的多个猫头鹰轮播来更改按钮的位置
【发布时间】：2016-08-25 23:02:17
【问题描述】：

我已经成功地在我的 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>

如果有人能就如何解决此问题提出建议，我将不胜感激，因为我想在其他页面上添加更多轮播，但需要先解决此问题。

提前致谢。

【问题讨论】：

标签： javascript html css shopify owl-carousel

【解决方案1】：

是否可以在这些滑块之一上添加 modifier 类？

如果您从两者调用相同的 sn-p，您甚至可以这样做，只需确保，例如，如果第二页使用名为 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%;
}

【讨论】：