时间戳

首页 > 解决方案 > 应用 CSS Grid 时 Owl Carousel 2 不工作

html - 应用 CSS Grid 时 Owl Carousel 2 不工作

问题描述

我有一个运行良好的 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 结合起来。

标签： htmlcsscss-gridowl-carousel

解决方案

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

推荐阅读