Owlcarousel2: owl-nav disabled

[Messa1]

Hey.

I have a problem with the owl-nav.
I set it true but at the HTML output it adds the class "disabled".

Here my code i use the latest version, i downloaded it today.

<script type='text/javascript'>

jQuery(document).ready(function($) {
     $('.owl-carousel').owlCarousel({
        nav: true,
        items: 1,
        loop: true,
        center: true,
        margin: 0,
        lazyLoad:true,
        dots: false
    });
 })

</script>"

[AndiKeiser]

Is there more than one item in the carousel ?

[Messa1]

No, at the moment only one for developing. I add a second and see whats happen.

[Messa1]

Oky tested it, can be closed. Works now with second element.

[enjdusan]

I have a same issue (v2.2.1)

$('.owl-carousel').owlCarousel({
    center: true,
    items: 3,
    loop: true,
    margin: 10,
    nav: true
});

I have centered gallery with three (now) images and .owl-nav gets class disabled. Same for .owl-dots.

[coder618]

I have same issue, but i am using multiple slider in same page.

main.js

$('#owl-two').owlCarousel({
        loop:true,
        margin:30,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:2
            },
            1000:{
                items:3
            }
        }
    });

    $('#owl-one').owlCarousel({
        loop:true,
        navText:['<button type="button" class="btn slider-left-btn"> </button>','<button type="button" class="btn slider-right-btn"> </button>'],
        dots:true,
        margin:100,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:1
            },
            1000:{
                items:1
            }
        }
    });

html markup

<div id="owl-one" class="owl-carousel owl-theme">
</div>
<div id="owl-two" class="owl-carousel owl-theme">
</div>

[emnoise]

The dots are only shown when the number of existing elements exceeds the number of visible elements.

[lear2000]

Same Here..
hacked my js to show anyway.

$('#featuredproducts .owl-nav').removeClass('disabled');

$('#featuredproducts .owl-nav').click(function(event) {
  $(this).removeClass('disabled');
});

[shafikulislam]

Go To owl.carousel.min.js or owl.carousel.js file whatever you linked. Find and Replace 'disabled' with 'anyClass'. Done !!! You'll Find 6 times I did a moment ago.. Enjoy !!!

[foysal-ahamed]

How many item you had? if there is one elements and your item is 1 so that means there is owl nav disabled by default. make your carousel 3 and then item: 1. nav will show

[coder618]

@foysal-ahamed , @emnoise , @shafikulislam Yes you people are correct, its happened because carousel did not have enough item's.

[applesapples1]

I have tried using one item, 3 items, 2 items, but no matter what the owl-nav and owl-dots don't appear. It's not css — there isn't any markup for these elements. Could you please help me?

Is it possible to have just one item?

I'm using v 2.1.6.

Here's my js:
$('.owl-carousel').owlCarousel({
navSpeed: 350,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
items: 1,
lazyLoad: true,
nav: true,
dots: true,
});

[rlambertsen]

I am getting the same issue.

 $('.product-lines').owlCarousel({
                items: 4,
                loop: true,
                margin: 15,
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                nav: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    479: {
                        items: 1
                    },
                    768: {
                        items: 2
                    },
                    979: {
                        items: 3
                    },
                    1200: {
                        items: 4
                    }
                }
            });

Not sure why but this should be fixed asap as the navigation is an important UI/UX feature of any slider or carousel. I will create a pull request if that hasn't already been done.

[coder618]

if your view-able items is less than total items than navigation will disable automatically. in other word you must have enough items to view Navigation which offer from Owl-carousel @rlambertsen

[ivan-frolov-webdev]

I have a simple trick:

$('.owl-carousel').find('.owl-nav').removeClass('disabled');
$('.owl-carousel').on('changed.owl.carousel', function(event) {
    $(this).find('.owl-nav').removeClass('disabled');
});

[elhaw]

just display _owl-nav_ as block and give it important
.owl-nav { display: block !important; }

[pascalporedda]

I will close this issue, as there are many proposed solutions.

[JDeuce]

The proposed solutions are kind of hacks though, the project should offer an extra setting for whether or not to hide the dots when there are less items.

[otherJeannie]

@pascalporedda @JDeuce especially in the case when there are the same number of items as are viewable but loop is set to true ... this is a bug.

[mostafa-saqr]

hay the problem is if you make a items:3 for ex to view 3 element/slide and you put 3 items only so the nav will be disabled try to put more than 3 element so nav will work because now you have more than 3 element and you configure to present 3 items only/ slide so you should use nav to see more elements. make sense

[kubiqsk]

It's bug, I'll explain:
imagine this:
{
nav: 1,
loop: 1,
items: 6,
autoWidth: 1,
}
but the 6th element is visible only partly because of autoWidth and there is also enabled loop, but there is no navigation!
That's really bad, I can fix it by customizing owl core js, but that's bad practise

[jevonthomas]

@ivan-frolov-webdev your trick works. Thanks!!!!!!!

[sabbirshawon]

I have facing same issues:

  jQuery(document).ready(function(){
    jQuery('.owl-carousel').owlCarousel({

    margin: 10,

    nav: true,

    navText:["<i class='fa fa-arrow-left'></i>","<i class='fa fa-arrow-right'></i>"],

    responsive: {

        0: {

            items: 1

        },

        600: {

            items: 3

        },

        1000: {

            items: 3

        }
    }
});

});`

[RahilNIT]

I Have Same Problem and Its bcs there is 4 carousel in One Page , Otherwise this worked:

nav: true,

[ghost]

I happens when items: is equal to current slide blocks count. For example you have 4 image in slider and items set to 4. It will add disabled: manually. Adding images to slider more than count of items: will fix problem.

[deepstha]

Great, Thankx

[brandondeweese]

I happens when items: is equal to current slide blocks count. For example you have 4 image in slider and items set to 4. It will add disabled: manually. Adding images to slider more than count of items: will fix problem.

Really? Because I can only get the nave to show if I have 4 or more images in the slider, regardless of the number of items I have.

[ghost]

I happens when items: is equal to current slide blocks count. For example you have 4 image in slider and items set to 4. It will add disabled: manually. Adding images to slider more than count of items: will fix problem.

Really? Because I can only get the nave to show if I have 4 or more images in the slider, regardless of the number of items I have.

I think you set items count to 4. That's why this happens.

[JonhCanedo]

It works for me!
goodlock!

__

[naigueldev]

In version 2.3.4 there is no such bug. Update plugin file versions.

[naigueldev]

In older versions, the param is navigation: true for activate nav ...

var owl = $('#carousel'); owl.owlCarousel({ autoPlay: true, navigation: true, slideSpeed: 600, items : 4, itemsDesktop : [1239,3], itemsTablet : [991,2], itemsMobile : [767,1] });

[uttamkrchowdhury]

If I use in react js then what to write to disable dots or navigation in responsive viewport?

[gurpreetsingh04]

You need to include "owl.navigation.js" also then only navigation and dots will show.

[rajeshkumarsah]

change src/style.css to src/style.scss is going to work. This things you are not going to achieve through console do again ng serve you will get probelm.

[AbdulrahmanMasoud]

طبعا هتلاقي واحد عربي دلوقت مش عارف المشكله فيه
ف احب اعرفك ان المشكله هي ان انت ضايف item
واحد بس
ف انت ضيف كمان item
او كذا item
وهي هتظهر معاك

[AbdulrahmanMasoud]

You must add more than one item
to show the nav and dots

[jnt2811]

the number of items you want to add has to be bigger than the number of items you want to display

[Gomathiss]

I happens when items: is equal to current slide blocks count. For example you have 4 image in slider and items set to 4. It will add disabled: manually. Adding images to slider more than count of items: will fix problem.

Great

[Gomathiss]

Hi please tell answer anyone i want to use 2 row carousel totally more than 30 items, i want to see 2 rows 5 items each row(1st row 5 items, 2nd row 5 items) totally 10 items visible.......please help anyone

[alim-14]

Hi please tell answer anyone i want to use 2 row carousel totally more than 30 items, i want to see 2 rows 5 items each row(1st row 5 items, 2nd row 5 items) totally 10 items visible.......please help anyone

https://codepen.io/Tolc/pen/OJXyKpo

[entryword]

just display _owl-nav_ as block and give it important
.owl-nav { display: block !important; }

This saved my day! Thank you!!

[WarisHaleem]

I had the same problem and solved it by CSS display property as bellow:
first, inspect your document while it still shows the nav icons, and find the class name of the nav icons and then write the CSS as below:

Working for me
.owl-carousel .owl-nav.disabled{
display: block;
}