Сова Карусель Нав Стрелки Стайлинг - PullRequest
Новая
       12

Сова Карусель Нав Стрелки Стайлинг

0 голосов
/ 04 декабря 2018

Я использую плагин Owl Carousel в одной из наших тем Shopify, но стрелки навигации расположены в левом нижнем углу карусели.Я пробовал разные стили, но ни одна из них не работает ...

Я пытаюсь добиться того, чтобы стрелки Навигации на внешней стороне карусели располагались посередине изображений.См. Пример ниже:

Carousel with halfway positioned arrows

КОД 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;
 }

Код выше генерирует следующее:

This is what I get

1 Ответ

0 голосов
/ 04 декабря 2018

Это пример того, как визуализируется 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.Вы можете использовать абсолютную позицию сверху и слева, чтобы получить желаемую позицию.

...