G
G
gassmonkey2016-04-06 17:35:55
JavaScript
gassmonkey, 2016-04-06 17:35:55

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 -->

How to rewrite the code in such a way that it works with multiple sliders on the page? Those. without assigning a different variable (owl) to each slider.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question