javascript - Owl Carousel 导航箭头造型

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 类。 您可以使用绝对位置与顶部和左侧来获得所需的位置。