javascript - 带有引导网格和卡片的 Owl Carousel

Question

$('.slider').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 3
    },
    600: {
      items: 3
    },
    1000: {
      items: 3
    }
  }
})

.main-content {
  background-image: url("https://d3ertfc829vzop.cloudfront.net/img/topo-map-50.png");
  background-color: #efefef;
}

.subheading-wrapper .subheading {
  font-size: 15px;
  color: #9AC133;
  text-transform: uppercase;
}

.heading-wrapper .heading {
  font-size: 2rem;
  color: #656565;
  font-weight: 500;
  text-transform: capitalize;
}

.card-img-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-img-overlay .card-title a {
  color: white;
}

.card-img-overlay .card-title a:hover {
  text-decoration: none;
}

.floating-wrapper {
  transform: translateX(0px) translateY(-100px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet">
<section>
  <div class="container my-5 py-3">
    <div class="row">
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae asperiores pariatur dignissimos itaque necessitatibus nam minus laudantium porro inventore cum ullam nisi, veniam, fugit deleniti explicabo nemo accusamus. Alias distinctio quisquam
        aperiam, voluptatem aliquid neque nisi minus dicta, ut beatae vitae vero labore cumque ad. Adipisci eaque tenetur veniam eius, ipsam minima fugiat deleniti est facere quasi consequuntur, odit doloremque deserunt veritatis, corporis nobis reiciendis
        eligendi. Saepe, eos nesciunt, impedit pariatur necessitatibus natus id harum et beatae, voluptatum nam odio! Doloribus sit quia deserunt. Soluta earum velit laudantium iusto deserunt eum iste illum nemo tempora consequatur amet voluptatum ut,
        exercitationem reiciendis sequi. Ipsum, assumenda laudantium! Soluta pariatur dolorum, quia ut tempora exercitationem placeat? Ratione animi laboriosam suscipit adipisci natus quo! Similique optio quidem animi amet nostrum, fugiat, repudiandae
        non laudantium consectetur aliquam recusandae velit quis nemo doloribus voluptas sunt ab incidunt! Id dolore consectetur repudiandae quidem dicta maiores illo, error eius tenetur eveniet consequatur esse voluptate cum, quaerat possimus odit alias
        ab, sit minus mollitia? Fugit labore dolorem voluptatem maxime reprehenderit fugiat assumenda, vero dicta, qui corporis minus! Sit consequuntur rerum est reprehenderit voluptatum sequi cupiditate. Qui ipsam saepe at dolor eos. Sequi voluptatem
        laborum impedit quis sapiente neque. Soluta!</p>
    </div>
  </div>
</section>

<section class="main-content">
  <div class="container">
    <div class="row py-5 position-relative">

      <div class="col-sm-12 col-md-3">
        <div class="subheading-wrapper mb-2">
          <span class="subheading">Lorem ipsum dolor.</span>
        </div>
        <div class="heading-wrapper mb-2">
          <span class="heading">
            Lorem ipsum dolor sit.
          </span>
        </div>
        <div class="content-wrapper">
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas, magnam facere inventore culpa suscipit ducimus exercitationem doloremque mollitia quod voluptate ipsa dolorem enim sint eaque quos debitis sapiente ipsam architecto velit sed!</p>
        </div>
      </div>

      <div class="col-md-9 col-sm-12 ">
        <div class="row position-absolute floating-wrapper slider owl-carousel owl-theme">

          <div class="col-4">
            <div class="card text-white">
              <img src="https://via.placeholder.com/500x858" alt="" class="card-img-top">
              <div class="card-img-overlay">
                <h5 class="card-title"><a href="#">Card title</a></h5>
              </div>
            </div>
          </div>

          <div class="col-4">
            <div class="card text-white">
              <img src="https://via.placeholder.com/500x858" alt="" class="card-img-top">
              <div class="card-img-overlay">
                <h5 class="card-title"><a href="#">Card title</a></h5>
              </div>
            </div>
          </div>

          <div class="col-4">
            <div class="card text-white">
              <img src="https://via.placeholder.com/500x858" alt="" class="card-img-top">
              <div class="card-img-overlay">
                <h5 class="card-title"><a href="#">Card title</a></h5>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</section>

以上代码片段来自应用程序的 html 模板。在这里，我正在尝试将 Owl Carousel 实现到卡片元素。

根据线框，该部分的布局应如下所示:

我实现了以下布局，但在添加 Owl Carousel 类 owl-carousel owl-theme 后，布局被毁容了。特卡，查不出原因。

我在 codepen 中重新创建了布局 here

Answer 1

问题是您在 owl-item 中有类 col-4。你不需要它，因为 owl-item 已经计算出宽度(所以你有 3 个元素可见)

bootstrap 中的 col-4 类向该元素添加了一个 width:33.33%。因此它将具有 owl-item 的 33.33% 宽度，但您需要 100%。

您可以将它更改为 col-12(如果您需要它是 flex)或删除该类，一切都会按预期工作。

<div>
 <div class="card text-white">
   <img src="https://via.placeholder.com/500x858" alt="" class="card-img-top">
   <div class="card-img-overlay">
     <h5 class="card-title"><a href="#">Card title</a></h5>
   </div>
 </div>
</div>

参见 codepen(前两项已更改)

https://codepen.io/MihaiTCode/pen/RwbyWVX