title: Owl Carousel Navigation not working
body: <p>I have 2 carousels, one under another, and i am using "navContainer" function to change the position of the navigation arrows (i am placing them above the slider).</p>
  
  <p>When i have one slider, that works, but when i have 2 (or more), navigation for both sliders is located in first "navhere" div. Instead of that, each of navigation buttons should be in its own div.</p>
  
  <p>You can get better idea of what i am talking here : <a href="http://jsfiddle.net/vnpm1y06/226/" rel="nofollow noreferrer">http://jsfiddle.net/vnpm1y06/226/</a></p>
  
  <p>Code is:</p>
  
  <pre><code>&lt;div class="about"&gt;
      &lt;div id="navhere"&gt;&lt;/div&gt; &lt;!-- This is where nav should appear --&gt;
      &lt;div class="owl-carousel"&gt;
          &lt;div class="item"&gt;&lt;h4&gt;About&lt;/h4&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;h4&gt;Us&lt;/h4&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="contact"&gt;
      &lt;div id="navhere"&gt;&lt;/div&gt; &lt;!-- This is where nav should appear --&gt;
      &lt;div class="owl-carousel"&gt;
          &lt;div class="item"&gt;&lt;h4&gt;Contact&lt;/h4&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;h4&gt;Form&lt;/h4&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jquery is</p>
  
  <pre><code> .owlCarousel({
          loop: true,
          margin: 10,
          nav: true,
          dots:false,
          items:1,
          navContainer: '#navhere'
      })
  </code></pre>