Question

我有一个Owl Carousel，它可以在CSS Grid容器中正常工作。一旦我将其放置在显示设置为网格的HTML标记内，它似乎不允许Owl正确显示，并且希望幻灯片可以并排放置，并且看起来也将它们加倍。

我设置了一个小提琴，以便您可以理解我的意思。如果删除注释，则CSS CSS网格将显示Owl将同时覆盖所有幻灯片。

<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相结合。

Answer 1

万一有人遇到这个问题。如果您将CSS Grid与Owl Carousel一起使用，则需要将父元素设置为具有min-width: 100%。

应用CSS网格时，Owl Carousel 2无法正常工作

1 个答案: