【问题标题】:Create Multiple Rows Carousel From Owl Carousel从 Owl Carousel 创建多行 Carousel
【发布时间】:2019-05-31 14:38:47
【问题描述】:

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

现在我的轮播看起来像这样。

我想要的是里面多了两个 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>

【问题讨论】:

  • 请创建代码的工作代码sn-p
  • 也许使用图像包而不是图像,我的意思是用一些 css 将它们包装在父级中,然后在这些包上应用轮播。

标签: javascript jquery css owl-carousel


【解决方案1】:
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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多