Bootstrap carousel last item will hide right control

Question

I am using bootstrap 4.0 version. I want to hide left control on the first item, and hide the right control on the last item. I think using jQuery it can be solved.

Left control will hide all the time it only show on the last item. And right control will show all the time but hide in the last item.

HTML:

JQuery:

$('.carousel').carousel({
    interval: false,
})

function checkitem()
{
    var $this = $('#carousel-1');
    if ($('.carousel-inner .carousel-item:first').hasClass('active')) {
        $this.children('.carousel-control-prev').hide();
    } else if ($('.carousel-inner .carousel-item:last').hasClass('active')) {
        $this.children('.carousel-control-next').hide();
    } else {
        $this.children('.carousel-control').show();

    }
}

user_1095101 · Answer

I removed the data-ride="carousel" so it doesn't start automatically, setted interval: false and wrap: false.
Added .d-none (Bootstrap class) to the controls so they start hidden.

If there are at least two items, then the next control is displayed.
Then, on every slide we check the next position and show the control accordingly.

var carouselLength = $('.carousel-item').length - 1;

// If there is more than one item
if (carouselLength) {
    $('.carousel-control-next').removeClass('d-none');
}

$('.carousel').carousel({
    interval: false,
    wrap: false
}).on('slide.bs.carousel', function (e) {
    // First one
    if (e.to == 0) {
        $('.carousel-control-prev').addClass('d-none');
        $('.carousel-control-next').removeClass('d-none');
    } // Last one
    else if (e.to == carouselLength) {
        $('.carousel-control-prev').removeClass('d-none');
        $('.carousel-control-next').addClass('d-none');
    } // The rest
    else {
        $('.carousel-control-prev').removeClass('d-none');
        $('.carousel-control-next').removeClass('d-none');
    }
});

.carousel {
    background-color: #ddd;
}

user_2820409 · Answer

You can use data-wrap="false" attribute to stop going forward or backward from last or first item.

$(document).ready(function(){
  // When strating hide prev arrow
  $('.carousel-control-prev').hide();
});



$('#carousel-1').on('slide.bs.carousel', function (e) {

  var slidingItemsAsIndex = $('.carousel-item').length - 1;

  // If last item hide next arrow
  if($(e.relatedTarget).index() == slidingItemsAsIndex ){
      $('.carousel-control-next').hide();
  }
  else{
      $('.carousel-control-next').show();
  }

  // If first item hide prev arrow
  if($(e.relatedTarget).index() == 0){
      $('.carousel-control-prev').hide();
  }
  else{
      $('.carousel-control-prev').show();
  }

})

user_5096405 · Answer

Here a general solution if you use data-ride="false":

 $('.carousel[data-ride="false"]').each(function(){
    $(this).find('.carousel-control-prev').hide();
    $(this).on('slide.bs.carousel', function (e) {
        var slidingItemsAsIndex = $(this).find('.carousel-item').length - 1;
        // If last item hide next arrow
        if($(e.relatedTarget).index() == slidingItemsAsIndex ){
            $(this).find('.carousel-control-next').hide();
        }
        else{
            $(this).find('.carousel-control-next').show();
        }
        if($(e.relatedTarget).index() == 0){
            $(this).find('.carousel-control-prev').hide();
        }
        else{
            $(this).find('.carousel-control-prev').show();
        }
    });
});

Bootstrap carousel last item will hide right control

3 Answers