Javascript 猫头鹰转盘导航箭头样式

我在我们的Shopify主题中使用了Owl旋转木马插件，但是导航箭头位于旋转木马的左下角。我尝试过不同的款式，但都不管用

我试图实现的是将导航箭头放在旋转木马的外侧，放在图像的中间。见下例：

到目前为止，我拥有的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>

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

---

这是一个如何呈现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类。

---

您可以使用“绝对位置”（position absolute）和“左上角”（top and left）来获得所需的位置。

我尝试了该选项，但根本不起作用。尝试定位这两个类：owl prev和owl紧挨着绝对，给它们一个50%的顶部等等，但它不会将其居中到图像的一半…父元素需要相对位置，尝试给相对于类owl Carouselse的位置更新，它可以工作，但当我切换到ipad或一些移动设备时，箭头并不总是在旋转木马的中间居中。给top的值40%或45%，检查什么最适合，而不是固定的像素是的，我试过了。在手机和台式机上运行良好，但在ipad和平板电脑上则变得不可用

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