title: Owl Carousel not initializing when including jQuery in HTML Head
body: <p>It seems that owl carousel is not initializing if jQuery is included in the HTML head section (including in body is working fine). In detail: The div-container with class owl-carousel has still defined <code>display: none</code>. In correctly initialized owl containers the class <code>owl-loaded</code> is added to the container by JavaScript which causes to overwrite <code>display: none</code> with <code>display: block</code>. Furthermore all options loaded on document ready are ignored:</p>
  
  <pre><code>$(document).ready(function () {
      $("#my-carousel").owlCarousel({
          items: 4,
          itemsCustom: false,
          itemsDesktop: [1199, 2],
          itemsDesktopSmall: [980, 2],
          itemsTablet: [768, 2],
          itemsTabletSmall: false,
          itemsMobile: [479, 1],
          singleItem: false,
          startDragging: true,
          autoPlay: 4000
      });
  });
  </code></pre>
  
  <p>However, I need jQuery in the header for building some angular directives which use jQuery UI components. Is there a way to initialize owl anyway?</p>
  
  <p>Versions I currently use:</p>
  
  <ul>
  <li>Owl Carousel v2.2.0 </li>
  <li>jQuery v1.11.3</li>
  </ul>
  
  <p>Thanks for any suggestions!</p>
  
  <p>EDIT: I'm sorry for not answering your suggestions quite a long time. I had no luck with using <code>noConflict</code> but as a workaround I delayed initializing owlCarousel which works for me - even if jQuery is included in the head-section:</p>
  
  <pre><code>$(document).ready(function () {
      setTimeout(function() {
          $("#my-carousel").owlCarousel({...});
      }, 500);
  });
  </code></pre>