Owl Carousel - How to show all the images underneath the main carousel?

Question

I want to show the list of all the available images underneath the carousel so that way when someone clicks on one of the images it becomes the main photo in the carousel... Not quite sure how to do this. tried looking into it but cant find anything.

Solution

There's a good open source support available for this. You can try this one: https://github.com/gijsroge/OwlCarousel2-Thumbs

Add it with the default owl carousel plugin and enable from your code:

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

Add thumbnails (link slider and thumbnails with data-slider-id attribute)

<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>