Сова карусель 2 миниатюры как карусель - PullRequest
Новая
       15

Сова карусель 2 миниатюры как карусель

0 голосов
/ 06 сентября 2018

Я успешно синхронизировал 2 карусели, и у одной из них есть эскизы. Это все хорошо синхронизировано и работает, однако список миниатюр довольно большой и образует многорядную сетку больших пальцев. Я бы хотел, чтобы сами миниатюры были каруселью, то есть они представляют собой один ряд прокрутки, а не несколько рядов.

Кто-нибудь знает, как это сделать? 

var sync1 = jQuery('#sync2'),
  sync2 = jQuery('#sync1');

sync1.on('click', '.owl-next', function() {
  sync2.trigger('next.owl.carousel')
});
sync1.on('click', '.owl-prev', function() {
  sync2.trigger('prev.owl.carousel')
});

sync1.owlCarousel({
  center: true,
  loop: true,
  items: 1,
  margin: 0,
  nav: true,
  mouseDrag: false,
  dots: false,
  touchDrag: false,
  navText: ['<i class="fas fa-caret-left"></i>', '<i class="fas fa-caret-right"></i>'],
  autoHeight: true
});

sync2.owlCarousel({
  center: true,
  loop: true,
  items: 1,
  margin: 10,
  nav: false,
  thumbs: true,
  mouseDrag: false,
  dots: false,
  touchDrag: false,
  thumbsPrerendered: true,
  autoHeight: true
});
.item {
  height: 10rem;
  background: #4DC7A0;
  padding: 1rem;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/owl.carousel@2.3.4/dist/owl.carousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/owl.carousel@2.3.4/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/owl.carousel@2.3.4/dist/assets/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

<div id="sync1" class="owl-carousel owl-theme">
  <div class="item">
    <h4>1</h4>
  </div>
  <div class="item">
    <h4>2</h4>
  </div>
  <div class="item">
    <h4>3</h4>
  </div>
  <div class="item">
    <h4>4</h4>
  </div>
  <div class="item">
    <h4>5</h4>
  </div>
  <div class="item">
    <h4>6</h4>
  </div>
  <div class="item">
    <h4>7</h4>
  </div>
  <div class="item">
    <h4>8</h4>
  </div>
  <div class="item">
    <h4>9</h4>
  </div>
  <div class="item">
    <h4>10</h4>
  </div>
  <div class="item">
    <h4>11</h4>
  </div>
  <div class="item">
    <h4>12</h4>
  </div>
</div>



<div id="sync2" class="owl-carousel owl-theme">
  <div class="item">
    <h4>1</h4>
  </div>
  <div class="item">
    <h4>2</h4>
  </div>
  <div class="item">
    <h4>3</h4>
  </div>
  <div class="item">
    <h4>4</h4>
  </div>
  <div class="item">
    <h4>5</h4>
  </div>
  <div class="item">
    <h4>6</h4>
  </div>
  <div class="item">
    <h4>7</h4>
  </div>
  <div class="item">
    <h4>8</h4>
  </div>
  <div class="item">
    <h4>9</h4>
  </div>
  <div class="item">
    <h4>10</h4>
  </div>
  <div class="item">
    <h4>11</h4>
  </div>
  <div class="item">
    <h4>12</h4>
  </div>
</div>
...