Owl Carousel Horizontal Thumbnail Bar- add navigation

Question

I have the following owl carousel with the thumbnail bar.

Technology used here,

1. Owl Carousel 2.3.4
2. Owl carousel 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/[email protected]/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>

As you can see in the snippet it's working fine, but here I need a simple modification.

I want to avoid the horizontal scroll-bar for the thumbnail and add navigation icons < and > in the both ends that perform well.

Answer 1

I don't know Owl Carousel Thumbs, but as what @lucascaro suggested, you just use another carousel for those thumbnails, and add appropriate event handler.

Say #oc1 is your top carousel, and #oc2 is your thumbnail carousel. You could write something like:

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

where data('slide') is some data- attribute, e.g. data-slide="1", you put in each slide of the thumbnail carousel.

Regarding to the left and right nav buttons, you write the buttons in your own HTML and attach the click events like this:

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