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,             }); }); 

see http://jsfiddle.net/1qdurrlz/18/.