2

Pessoal gostaria de saber se existe a possibilidade de fazer um slide de thumbnails igual a esse aqui com owl-carrousel 2 se sim exite algum link que mostre algum exemplo de como fazer como mostra a imagem a abaixo e no link queria fazer esse slide porem usando o owl-carrousel

inserir a descrição da imagem aqui

1 Resposta 1

3

Existe esse plugin para criar thumbnail no owl-carrousel.

Basicamente, você adiciona ele na chamada do owl:

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

E depois adiciona as thumbnail no 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>

Demonstração

2
  • entendi Obrigado pela resposta, você chegou a abrir o link da minha pergunta percebe que quando tem muitas thumbs ele meio que cria uma carrousel de thumbs embaixo do slude isso para o responsivo é bom e evita que uma thumb fica embaixo da outra tem alguma forma de deixar dessa forma ? usando owl carrousel 28/05/2018 às 17:41
  • Hm, já utilizei esse plugin e nunca cai nesse cenário de muitas thumbs... Pesquisei aqui e não encontrei nenhuma correção para este problema, onde teoricamente, como você mesmo disse, seria uma "thumb responsiva".. Porém, encontrei outro tutorial para implementar uma thumbnail no owl carrousel, verifica se te ajuda: blog-nstechframe.blogspot.com.br/2016/02/…
    – Piupz
    28/05/2018 às 19:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .