Answer the question
In order to leave comments, you need to log in
Owl Carousel. How to limit one initialization for several sliders of the same type on the page when using Custom Events?
Owl v1.3
There is such code.
$(document).ready(function(){
var owl = $(".gallery__img");
owl.owlCarousel({
singleItem: true,
items: 1,
navigation:true,
navigationText: false,
rewindNav: false,
afterMove: act
});
$('.gallery__thb img').on('click', function(){
var k = $(this).index();
owl.trigger('owl.goTo',k);
});
function act(){
$('.gallery__thb img').removeClass('active').eq(this.owl.currentItem).addClass('active');
}
});
<div class="work__gallery gallery">
<div class="gallery__img">
<img src="img/content/gallery/gallery-template.jpg" alt="">
<img src="img/content/gallery/gallery-template.jpg" alt="">
<img src="img/content/gallery/gallery-template.jpg" alt="">
<img src="img/content/gallery/gallery-template.jpg" alt="">
<img src="img/content/gallery/gallery-template.jpg" alt="">
</div>
<!-- /.gallery__img -->
<div class="gallery__thb">
<img class="active" src="img/content/gallery/thb/1.jpg" alt="">
<img src="img/content/gallery/thb/2.jpg" alt="">
<img src="img/content/gallery/thb/3.jpg" alt="">
<img src="img/content/gallery/thb/4.jpg" alt="">
<img src="img/content/gallery/thb/5.jpg" alt="">
</div>
<!-- /.gallery__thb -->
</div>
<!-- /.work__gallery -->
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question