Hide Twitter Bootstrap left and right arrows if only one slider is present

user_520520 0
Viewed 11969

I've been trying to hide the Bootstrap Carousel left and right buttons if only one slider is present but can't seem to get it to work properly.

I've tried

    if ($('.carousel-inner div').length === 1 ) { 
        $(this).find('.controls .carousel-control').hide();
    }

and 

    if($('.carousel-inner .item').is(':only-child')) {
    $(this).find('.controls .carousel-control').hide();

Without any luck.

Is there a particular reason why neither of these would work? The console returns the correct number of sliders for .length and I use the exact same .hide method on a different function dealing with this carousel.

twitter-bootstrap jquery javascript
3 Answers

Try this for Bootstrap 4+

$('.carousel-inner').each(function() {

if ($(this).children('div').length === 1) $(this).siblings('.carousel-indicators, .carousel-control-prev, .carousel-control-next').hide();

});
user_103146220
Related