应用 CSS 网格时，猫头鹰旋转木马 2 不起作用

Question

我有一个 Owl Carousel，它运行良好，但它不在 CSS Grid 容器中。一旦我将它放在一个 HTML 标签中，并且显示设置为网格，它似乎不允许 Owl 正确显示，并且会并排放置幻灯片，并且看起来也将它们加倍。

我设置了一个小提琴，所以你可以明白我的意思。如果您删除网格 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
            }
        }
    });
});

提琴手

它似乎并排显示所有幻灯片，导致过多的水平滚动。我已经使用了很多这个库，但我想我从来没有尝试过将它与 CSS Grid 结合起来。

Answer 1

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