jqueryowl-carousel

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'
    })
Solution

  • 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!