Сова Карусель Горизонтальная панель миниатюр - добавить навигацию - PullRequest
Новая
       21

Сова Карусель Горизонтальная панель миниатюр - добавить навигацию

0 голосов
/ 30 октября 2018

У меня есть следующее owl carousel с thumbnail bar.

Технология, используемая здесь,

  1. Сова Карусель 2.3.4
  2. Сова карусель Thumbs 

$('.sv-slider .owl-carousel').owlCarousel({
  autoplay: false,
  autoplayHoverPause: true,
  dots: false,
  nav: true,
  thumbs: true,
  thumbImage: true,
  thumbsPrerendered: true,
  thumbContainerClass: 'owl-thumbs',
  thumbItemClass: 'owl-thumb-item',
  loop: true,
  navText: [
    "<i class='fa fa-chevron-left' aria-hidden='true'></i>",
    "<i class='fa fa-chevron-right' aria-hidden='true'></i>"
  ],
  items: 1,
  responsive: {
    0: {
      items: 1,
    },
    768: {
      items: 1,
    },
    992: {
      items: 1,
    }
  }
});
.sv-slider-item img {
  width: 100%;
  height: 200px;
}

.sv-slider .owl-thumbs {
  white-space: nowrap;
  overflow: auto;
}

.owl-thumbs button>img {
  width: 200px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/owl.carousel2.thumbs@0.1.8/dist/owl.carousel2.thumbs.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />





<div class="sv-slider">
  <div class="owl-carousel" data-slider-id="1">
    <div class="sv-slider-item">
      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">
    </div>
    <div class="sv-slider-item">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">
    </div>
    <div class="sv-slider-item">
      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">
    </div>
    <div class="sv-slider-item">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSS50lYMo-3vCNMfn31Rh2VmAtp2pAZuHSPv_KtJCpqLprrdpX46A" alt="">
    </div>
    <div class="sv-slider-item">
      <img src="https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg" alt="">
    </div>
  </div>
  <div class="owl-thumbs" data-slider-id="1">

  </div>
</div>

Как вы можете видеть из фрагмента, он работает нормально, но здесь мне нужна простая модификация.

Я хочу избежать horizontal scroll-bar для миниатюры и добавить значки навигации < и > в обоих концах, которые хорошо работают.

1 Ответ

0 голосов
/ 09 ноября 2018

Я не знаю, Сова Карусель Thumbs, но, как подсказал @lucascaro, вы просто используете другую карусель для этих миниатюр и добавляете соответствующий обработчик событий.

Скажите, что # oc1 - ваша лучшая карусель, а # oc2 - ваша карусель миниатюр. Вы могли бы написать что-то вроде: 

$('#oc2 .item').click(function () {
    $('#oc1').trigger('to.owl.carousel', $(this).data('slide'));
});

где данные («слайд») - это некоторый атрибут данных, например, data-slide = "1", вы помещаете в каждый слайд карусели миниатюр.

Что касается левой и правой кнопок навигации, вы пишете кнопки в своем собственном HTML и прикрепляете события щелчка следующим образом: 

$('.left').click(function () {
    $('#oc2').trigger('prev.owl.carousel');
});
$('.right').click(function () {
    $('#oc2').trigger('next.owl.carousel');
});
...