title: Asynchronous owl carousel in one page
body: <p>I have 3 carousels on my page with the same class name.</p>
  
  <pre><code> &lt;div&gt;
     &lt;div class="owl-carousel owl-theme"&gt;
       &lt;div class="item"&gt;&lt;img src="assets/fullimage1.jpg"&gt;&lt;/div&gt;
       &lt;div class="item"&gt;&lt;img src="assets/fullimage2.jpg"&gt;&lt;/div&gt; 
     &lt;/div&gt;
  
     &lt;div class="owl-carousel owl-theme"&gt;
       &lt;div class="item"&gt;&lt;img src="assets/fullimage3.jpg"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="assets/fullimage4.jpg"&gt;&lt;/div&gt; 
     &lt;/div&gt;
  
     &lt;div class="owl-carousel owl-theme"&gt;
       &lt;div class="item"&gt;&lt;img src="assets/fullimage5.jpg"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="assets/fullimage6.jpg"&gt;&lt;/div&gt; 
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>and then on my js</p>
  
  <pre><code> $(".owl-carousel ").owlCarousel({  
      navigation : false, 
      singleItem : true,
      autoPlay: true,
      pagination: false,
      transitionStyle: "fade"
  });
  </code></pre>
  
  <p>This works fine, but all the carousels start almost on the same time. Is there a way to add a delay between the carousels? So first start the first one, and then when the first one is done, the second starts etc...
  Thank you in advance.</p>