title: OWL Carousel 2: current item when page loads
body: <p>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:</p>
  
  <pre><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,        
      });
  })
  </code></pre>
  
  <p>Here a working example: <a href="http://jsfiddle.net/kurtko/1qdurrLz/16/" rel="nofollow">http://jsfiddle.net/kurtko/1qdurrLz/16/</a></p>
  
  <p>This code works fine when carousel changes but fails when page is loaded because e.relatedTarget.current() is null</p>
  
  <p>Any ideas?</p>
  
  <p>Thanks.</p>