Owl 带有 bootstrap 网格和卡片的旋转木马

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 轮播。

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

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

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

Answer 1

问题是 owl-item 中有 class col-4。你不需要它，因为 owl-item 已经计算出宽度（所以你有 3 个项目可见）

来自 bootstrap 的 col-4 class 向该元素添加了 width:33.33%。所以它将具有 owl-item 的 33.33% 宽度，但你需要 100%。

您可以将其更改为 col-12（如果您需要它是灵活的）或删除 class，一切都会按预期工作。

<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

Owl 带有 bootstrap 网格和卡片的旋转木马

Owl carousel with bootstrap grid and card

javascript

jquery

html

css

owl-carousel