I'm using Owl Carousel in the large image, the thumbnails on the left side should work as controler too, but I'm not sure how to get the 'change image' event from the slide. How can I do this?
This method has in the documentation, see:
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 div.item
you have to put a 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>
Then in the thumbnail images you put a <a href="#foto-um">
.
<a href="#foto-um"><img></a>
<a href="#foto-dois"><img></a>
<a href="#foto-tres"><img></a>