Hide dots when all divs/slides are visible - Owl carousel 2

Question

everyone!

I have dynamicaly generated owl carousel items and i could often have the situation in which all items in the carousel can be visible on the high resolutions. In that case i dont need that one "dot" showing below the carousel.

So for e.g. i will have 4 items and all four of them will be visible on the desktop resolution and in that situation i dont need that one slide dot. but i will need the dots for smaller screens because smaller resolutions will display only 1 or 2 items per slide. but there could be situation with more than 4 items in the carousel (4 per slide max on big resolution) and in that case on big resolutions i will need the dots below.

Is it possible to set owl carousel2 to hide dots or nav buttons when all divs inside the carousel are visible. i couldn't find that feature in documentation and i have also looked here about this topic but couldn't find the answer.

If this feature is not supported already, can anyone help me how to make dot dissapear when all items in the carousell are visible?

thx

Answer 1

You can add options to the responsive calls to remove the navigation

See below for example from Owl Carousel 2 docs

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
})

Answer 2

Based on the documentation you could use the following initialization. On the onResize you can have a callback. The argument of the callback has an object with data that tell you how many pages the carousel has.

So you can determine if there are more than one pages you can turn on or off the dots and implement the following.

var callback = function(e) { 
    var owl = $('.owl-carousel').data('owlCarousel');

    // This is something I found on the documentation but it does not seem to work
    var hasDots = e.page.count > 1; 

    owl.options.dots = hasDots;
    owl.update();
    owl.refresh();
}

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    dots: true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    },
    onResize: callback
});

Unfortunately, although the documentation mentions that each callback is called with an argument, in my tests the e argument is always undefined.

So I used a different approach to determine if there are more than one pages. In my demo, the carousel has 4 items and in my initialization I set that when the width of the page is more than 1000 the page size is 5.

So the arbitrary rule that when the width of the page is more than 1000px the carousel has only one dot and in that case you can disable them.

var callback = function(e) { 
    console.log(e); //this is undefined :(
    var owl = $('.owl-carousel').data('owlCarousel');

    var width = $(document).width(); // apply arbitrary rule
    var hasDots = (width <= 1000);
    console.log('width: ' + width + ' hasDots: ' + hasDots); // debug purposes

    owl.options.dots = hasDots;
    owl.update();
    owl.refresh();
}

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:4
        }
    },
    onResize: callback
});

A working demo is here:

P.S.: I know my answer is not complete, but it might help you to make your example work.