从猫头鹰轮播创建多行轮播

Question

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

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

我想在其中包含两个rwos，然后单击next和prev按钮。我尝试了以下代码，但无法正常工作。

这是我的代码：

HTML：

<main>
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</main>

<button>Add</button>

<p><span id="added">0</span>vw Added to blue div's width</p>

她是我的 Javascript：

<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>

Answer 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>