Owl v1.3
Имеется такой код.
$(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 -->
Как переписать код таким образом, чтоб он работал с несколькими слайдерами на странице? Т.е. без присваивания разной переменной (owl) каждому слайдеру.