时间戳

首页 > 解决方案 > 从 Owl Carousel 创建多行 Carousel

javascript - 从 Owl Carousel 创建多行 Carousel

问题描述

我正在尝试在我的网页中插入猫头鹰轮播。其中包含多行中的轮播项目。

现在我的旋转木马看起来像这样。

在此处输入图像描述

我想要的是里面还有两个 rwo，然后是下一个和上一个按钮。我尝试了以下代码，但它不起作用。

这是我的代码：

HTML： 

<div class="owl-carousel owl-theme">
  <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
  <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
  <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
  <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
  <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
  <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
  <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
  <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
  <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
  <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
  <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
  <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
  <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
  <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
  <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
</div>

她是我的Javascript ：

<script type="text/javascript">
    $(".owl-carousel").owlCarousel({
    nav: true,
  dots: false,
  loop: false,
  rewind: true,
  // autoWidth: true,
  stagePadding: 0,
  margin: 4,
  checkVisibility: true,
  navElement: 'div',
  responsive : {
    0 : {
      items: 4,
      slideBy: 4
    },
    768 : {
      items: 2,
      slideBy: 2
    },
    1024 : {
      items: 3,
      slideBy: 3
    },
    1280 : {
      items: 4,
      slideBy: 4
    },
    1440 : {
      items: 5,
      slideBy: 4
    }
  }
});
</script>

标签： javascriptjquerycssowl-carousel

解决方案

Try this :


  <div class="row">
    <div class="col-md-12">
    <div class="owl-carousel owl-theme">
      <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
      <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
      <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
      <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
      <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
    </div> </div>
    <div class="col-md-12">
    <div class="owl-carousel owl-theme">
      <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
      <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
      <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
      <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
      <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
    </div></div>
    <div class="col-md-12">
    <div class="owl-carousel owl-theme">
      <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
      <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
      <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
      <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
      <div><img class="client_image" src="assets/img/banner/download.png" alt="Owl Image"></div>
    </div>
    </div></div>

推荐阅读