CODEWITHSUNDEEP
owl-carousel
kurtko
kurtko

Reputation: 2126

OWL Carousel 2: current item when page loads

I need to change the class to current item when the page is loaded. I'm showing caption in current item. Here is the code:

$(document).ready(function() {

    $('#slider').on('change.owl.carousel changed.owl.carousel', function(e) { 
        if (e.property.name != 'position') return;

        var current = e.relatedTarget.current()
        var items = $(this).find('.owl-stage').children()
        var add = e.type == 'changed'

        items.eq(e.relatedTarget.normalize(current )).toggleClass('current', add)
    });

    $('#slider').owlCarousel({        

        items : 2,        
        nav: true,
        loop: true,        
    });
})

Here a working example: http://jsfiddle.net/kurtko/1qdurrLz/16/

This code works fine when carousel changes but fails when page is loaded because e.relatedTarget.current() is null

Any ideas?

Thanks.

Upvotes: 2

Views: 12483

Answers (1)

witrin
witrin

Reputation: 3763

You have to use the initialized event for this:

$(document).ready(function() {
    $('#slider').on('initialized.owl.carousel change.owl.carousel changed.owl.carousel', function(e) { 
        if (!e.namespace || e.type != 'initialized' && e.property.name != 'position') return

        var current = e.relatedTarget.current()
        var items = $(this).find('.owl-stage').children()
        var add = e.type == 'changed' || e.type == 'initialized'

        items.eq(e.relatedTarget.normalize(current)).toggleClass('current', add)
    }).owlCarousel({
        items : 2,        
        nav: true,
        loop: true,        
    });
});

See http://jsfiddle.net/1qdurrLz/18/.

Upvotes: 6

Related Questions