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.

Sassaby

Why my questions don't get enough reach and answers? I know owl carousel is a popular language, but still no one here to answer my question – Sassaby

Where do you need those navigation icons? On top of main carousel or on left and right of thumbs container? – Interrupter

not familiar with owlcarousel, but it sounds that what you need is to add a carousel to your thumbnails? – Deficiency

@MahbubHasan on left and right – Sassaby

@Deficiency exactly sir – Sassaby

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');
});

Nur

Thank you for your reply sir. I used owl-carousel here because of the Owl carousel Thumbs support. This make the implementation easier and saves time. I am looking for a solution relevant to the Owl carousel Thumbs technology. – Sassaby