Owl Carousel Navigation not working
<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>