CODEWITHSUNDEEP
jqueryowl-carousel
Vlidurno
Vlidurno

Reputation: 95

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

Upvotes: 1

Views: 28808

Answers (4)

Naweed
Naweed

Reputation: 1

You can do something like this

#id_of_your_custom_owl_carousel
 .owl-nav.disabled
{
display: block !important;
}

Upvotes: 0

Vinay SIngh
Vinay SIngh

Reputation: 31

if your view-able items are less than the total items then the navigation will disable automatically. in another word you must have enough items to view Navigation which offer from Owl-carouse

Upvotes: 3

Farman Ahmed -9849
Farman Ahmed -9849

Reputation: 11

Navigation not working

.owlCarousel({
        startPosition: 0,
        margin: 20,
        dots: true,
        loop: true,
        autoplay: true,
        nav: true,
        pagination :true,
        autoplayTimeout:6000,
        responsiveClass:true,
        responsive:{
            0:{

                items:1
            },
            480:{

                items:2
            },
            568:{

                items:2
            },
            667:{

                items:2
            },
            768:{

                items:3
            },
            1024:{
                items:5
            }
        }
    });
});

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

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!

Upvotes: 4

Related Questions