Slide with thumbnail using owl carrousel 2

2

People would like to know if there is a possibility to make a thumbnails slide equal to here with owl-carrousel 2 if yes exite some link that shows some example of how to do as it shows the image to below and in the link wanted to make that slide by using the owl-carrousel

    
asked by anonymous 28.05.2018 / 16:27

1 answer

3

There is this plugin to create thumbnail on owl-carrousel.

Basically, you add it to the owl call:

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    thumbs: true,
    thumbsPrerendered: true
  });
});

And then add the thumbnail in the HTML:

<div class="owl-carousel" data-slider-id="1">
    <div>Your Content</div>
    <div>Your Content</div>
    <div>Your Content</div>
    <div>Your Content</div>
</div>
<div class="owl-thumbs" data-slider-id="1">
    <button class="owl-thumb-item">slide 1</button>
    <button class="owl-thumb-item">slide 2</button>
    <button class="owl-thumb-item">slide 3</button>
    <button class="owl-thumb-item">slide 4</button>
</div>

Demonstration

    
28.05.2018 / 16:55