Карусель с несколькими строками из карусели сов - PullRequest
Новая
       18

Карусель с несколькими строками из карусели сов

0 голосов
/ 14 мая 2019

Я пытаюсь вставить совую карусель на мою веб-страницу. который содержит элементы карусели в несколько рядов.

Прямо сейчас моя карусель выглядит примерно так.

enter image description here

То, что я хочу иметь, это еще две rwos внутри него, а затем кнопки & пред. Я попробовал следующий код, но он не работает.

Вот мой код:

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>

1 Ответ

0 голосов
/ 31 мая 2019 
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>
...