Owl Carousel 2 не работает при использовании CSS Grid - PullRequest
Новая
       26

Owl Carousel 2 не работает при использовании CSS Grid

0 голосов
/ 22 января 2019

У меня есть Сова Карусель, которая прекрасно работает с ней не в контейнере CSS Grid.Как только я помещаю его в тег HTML с отображением, настроенным на сетку, кажется, что Owl не может отображаться должным образом, и слайды будут располагаться рядом, и, похоже, они также удваиваются.

Я настроил скрипку, чтобы вы поняли, о чем я.Если вы удалите комментарии из сетки CSS, вы увидите, что Сова будет охватывать все слайды одновременно. 

<section>
<article>
<div class="owl-carousel owl-theme">
  <div class="slide"> Your Content </div>
  <div class="slide"> Your Content </div>
  <div class="slide"> Your Content </div>
  <div class="slide"> Your Content </div>
  <div class="slide"> Your Content </div>
  <div class="slide"> Your Content </div>
  <div class="slide"> Your Content </div>
</div>


section{

  background-color: #000000;

 /*display:grid;
  grid-template-columns: repeat(1,1fr);
  grid-template-areas: "slide-show";*/

  article{
    /*grid-area: slide-show;*/

   .owl-carousel{

      .slide{
          background-color: red;
          text-align: center;
          color: #fff;
          height: 500px;
      }
    }
  }

  }

    $(document).ready(function(){
  $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 10,
        nav: true,
        dots: true,
        autoHeight: true,
        autoplay: false,
        responsive: {
            0: {
                items: 1
            },
            768: {
                items: 1
            },
            1400: {
                items: 1
            }
        }
    });
});

JsFiddle

Кажется, что все слайды отображаются рядом, что вызывает чрезмерную горизонтальную прокрутку.Я много раз использовал эту библиотеку, но, наверное, я никогда не пытался объединить ее с CSS Grid.

1 Ответ

0 голосов
/ 22 января 2019

На случай, если кто-нибудь столкнется с этой проблемой.Если вы используете CSS Grid с Owl Carousel, вам нужно установить для родительского элемента значение min-width: 100%.

...