Clever Geek Handbook

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

all!

I have dynamically created owl carousel items and I could often have a situation where all the items in the carousel can be seen at high resolutions. In this case, I don't need this "dot" shown below the carousel.

So, for example, for. I will have 4 elements and all four of them will be visible on the desktop and in this situation I don't need that one point of the slide. but I need dots for smaller screens because the lower resolution only displays 1 or 2 items per slide. but there could be a situation with more than 4 items in the carousel (4 per slide max at high resolution), in which case at higher resolutions I would 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 this function in the documentation and I also looked here about this topic but couldn't find an answer.

If this feature is no longer supported, can anyone help me on how to make the point unsatisfactory when all the items in the carousel are visible?

THH

+3


source to share


2 answers


You can add parameters for responsive calls to remove 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
        }
    }
})
+2


source


Based on the documentation, you can use the following initialization. On onResize

you can get a callback. The callback argument has a data object that tells you how many pages the carousel has.

So, you can determine if there are multiple pages that you can turn on or off 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 every callback is called with an argument, in my tests the argument is e

always undefined.

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



So it's an arbitrary rule that when the page width is over 1000px, the carousel only has one dot, in which case you can turn them off.

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

Working demo here :

PS: I know my answer is incomplete, but it might help you make your example work.

+1


source






More articles:


All Articles