Question

我在我们的Shopify主题之一中使用了Owl Carousel插件，但是导航箭头位于旋转木马的左下角。我尝试了不同的样式，但是它们都不起作用...

我要实现的目标是在轮播的外部放置导航箭头，将其定位在图像的中间。请参见下面的示例：

到目前为止，我有HTML代码：

<div class="container">

  <div class="row">
    <div class="col-sm-6 product-image" id="product-image">
     <div class="product-image-inner">
      {% assign current_variant = product.selected_or_first_available_variant %}
      {% assign featured_image = current_variant.featured_image | default: product.featured_image %}
      <a href="{{ featured_image | product_img_url: 'original' }}" class="featured-image elevatezoom">
        <img id="show-img" class="zoom-image" src="{{ featured_image | product_img_url: '1024x1024' }}" data-zoom-image="{{ featured_image | product_img_url: 'original' }}" alt="{{ product.title | escape }}" />
      </a>

          <div class="owl-carousel owl-theme">

          {% for image in product.images %}
          <ul id="gallery-image" class="gallery-image-thumb item ">

          <li >
            <a class="thumb-img{% if forloop.index == 1 %} active{% endif %}" data-image="{{ image | product_img_url: '1024x1024' }}" data-zoom-image="{{ image | product_img_url: 'original' }}">
              <img src="{{ image.src | img_url: '500x500' }}" alt="{{ product.title | escape }}" class="thumb-prod">
            </a>
          </li>

            </ul>
          {% endfor %}
          </div>
        </div>
     </div>

  </div>
</div>

CSS代码：

.owl-carousel{
  position: relative;
}

.owl-prev, .owl-next {
    position:absolute;
 }

.owl-prev {
    left:0;
    top: 25px;
 }

 .owl-next {
    right:0;
    top:25px;
 }

上面的代码生成以下内容：

Answer 1

这是html呈现方式的示例。使用以下选项，您可以按自己的方式更改几乎每个班级

<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
    <div class="owl-stage">
        <div class="owl-item">...</div>
        <div class="owl-item">...</div>
        <div class="owl-item">...</div>
    </div>
</div>
<div class="owl-nav">
    <div class="owl-prev">prev</div>
    <div class="owl-next">next</div>
</div>
<div class="owl-dots">
    <div class="owl-dot active"><span></span></div>
    <div class="owl-dot"><span></span></div>
    <div class="owl-dot"><span></span></div>
</div>

因此，在您的CSS中，您可以将CSS赋予owl-nav类。您可以在顶部和左侧使用绝对位置来获取所需位置。

猫头鹰旋转木马导航箭头样式

1 个答案: