Slide with thumbnail using Owl Carrousel 2

Asked

Viewed 559 times

2

People would like to know if there is the possibility of making a thumbnails slide like this here with owl-carrousel 2 if there is a link that shows some example of how to do the image below and in the link wanted to do this slide using the Owl-Carrousel

inserir a descrição da imagem aqui

1 answer

3

There is a that plugin to create thumbnail in 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 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

  • I understood Thank you for the reply, you came to open the link of my question you realize that when there are many Thumbs it kind of creates a Thumbs Racing under the slude that for the responsive is good and prevents that one Thumb is under the other has any way to leave that way ? using Owl Carrousel

  • Hm, I’ve used this plugin and never fall into this scenario many Thumbs... I searched here and found no fix for this problem, where theoretically, as you said yourself, it would be a "responsive Thumb".. However, I found another tutorial to implement a thumbnail in Owl Carrousel, check if it helps you: http://blog-nstechframe.blogspot.com.br/2016/02/thumbnail-slider-using-owl-carousel-2_22.html

Browser other questions tagged

You are not signed in. Login or sign up in order to post.