Vlidurno Vlidurno - 1 year ago 175
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 Source

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!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download