How to catch Owl Carousel event

Asked

Viewed 508 times

1

I’m using Owl Carousel in the large image, the thumbnails on the left should work as a controler too, but I don’t know how to catch the 'picture change' slide event. How can I do that?

inserir a descrição da imagem aqui

javascript jquery owl-carousel

  • It will be difficult for the thumbnail to select exactly the same image in the Carousel. What you have tried?

  • @War I was able to select the image that is active and activate the same of the thumbnail, but it does not change according to the Carousel because it still needs to put the event rs

  • Put the code you used to see, Voce can do with pure javascript too.

1 answer

1


This method has in the documentation, see:

http://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html#seven

URLhashListener:true

startPosition: 'URLHash'

Only implement.

$('.owl-carousel').owlCarousel({
    items:4,
    loop:false,
    center:true,
    margin:10,
    URLhashListener:true, // ESSE 
    autoplayHoverPause:true,
    startPosition: 'URLHash' // E ESSE
});

In the div.itemyou have to have put one data-hash with a unique name.

Type:

<div class="item" data-hash="foto-um"> IMG </div>
<div class="item" data-hash="foto-dois"> IMG </div>
<div class="item" data-hash="foto-tres"> IMG </div>

From there in the thumbnail images you place a <a href="#foto-um">.

<a href="#foto-um"><img></a>
<a href="#foto-dois"><img></a>
<a href="#foto-tres"><img></a>

  • looks like the script is miscalculating, the "#photo-one" selects the "#photo-seven" and so on, but the Owl-Carousel controllers are normal starting with the first item

  • It must be because of the Loop. Disable it with loop: false. Or is already deactivated ?

Browser other questions tagged javascript jquery owl-carousel

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