OWL Carousel 2: current item when page loads -
i need change class current item when page loaded. i'm showing caption in current item. here 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 working example: http://jsfiddle.net/kurtko/1qdurrlz/16/
this code works fine when carousel changes fails when page loaded because e.relatedtarget.current() null
any ideas?
thanks.
you have use initialized
event 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, }); });
Comments
Post a Comment