owl carousel 2 - все элементы отображаются, когда ширина контейнера становится 100% на экране мобильного устройства - PullRequest
Новая
       158

owl carousel 2 - все элементы отображаются, когда ширина контейнера становится 100% на экране мобильного устройства

1 голос
/ 20 июня 2020

Я пытаюсь отобразить один элемент на всех экранах, которые работают нормально, и отобразить один элемент до размера экрана 640 пикселей с использованием структуры tailwind css. Но когда ширина контейнера увеличивается на 100% на экране размером менее 640 пикселей, сова карусельно перемещает все элементы, отображаемые по горизонтали. Я пробовал несколько решений из inte rnet, включая stackoverflow, но не смог исправить эту проблему. Вот мой код: 

<div id="slider">
    <div class="container">
      <div id="slider-carousel" class="owl-carousel owl-theme ">
        <div class="item">
          <img src="assets/image/gallery-image-1.png" alt="" />
        </div>
        <div class="item">
          <img src="assets/image/gallery-image-2.png" alt="" />
        </div>
        <div class="item">
          <img src="assets/image/gallery-image-3.png" alt="" />
        </div>
      </div>
    </div>
  </div>

, а настройки карусели совы: 

$(document).ready(function() {
    $('.owl-carousel').owlCarousel({
      singleItem: true,
      items: 1,
      loop: true,
      margin: 10,
      nav: true,
    });
  });

Как я уже упоминал выше, единственная проблема - когда размер контейнера становится 100% на экране менее 640 пикселей, тогда все элементы отображаются в строке вместо одного элемента. Пожалуйста, дайте мне знать, что я делаю не так.

1 Ответ

0 голосов
/ 04 июля 2020

Мне помогли с другой платформы. В моем случае я использовал сетку во внешнем div верхнего уровня. Вот почему карусель не работает на маленьком экране. Спасибо

...