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