Vlidurno Vlidurno - 25 days ago 10
jQuery Question

Owl Carousel Navigation not working

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).

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.

You can get better idea of what i am talking here : http://jsfiddle.net/vnpm1y06/226/

Code is:

<div class="about">
<div id="navhere"></div> <!-- This is where nav should appear -->
<div class="owl-carousel">
<div class="item"><h4>About</h4></div>
<div class="item"><h4>Us</h4></div>
</div>
</div>
<div class="contact">
<div id="navhere"></div> <!-- This is where nav should appear -->
<div class="owl-carousel">
<div class="item"><h4>Contact</h4></div>
<div class="item"><h4>Form</h4></div>
</div>
</div>


jquery is

.owlCarousel({
loop: true,
margin: 10,
nav: true,
dots:false,
items:1,
navContainer: '#navhere'
})

Answer

You cannot duplicate the values of id. It has to be unique. That's the reason.

Still. According to this issue, multiple nav hasn't been yet implemented!