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 bees the main photo in the carousel... Not quite sure how to do this. tried looking into it but cant find anything.

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 bees the main photo in the carousel... Not quite sure how to do this. tried looking into it but cant find anything.

• javascript
• php
• html
• css
• carousel

1 Answer 1

There's a good open source support available for this. You can try this one: https://github./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>