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:

<div id="carousel-1" class="carousel slide" data-ride="carousel">

      <div class="carousel-inner">
        <div class="carousel-item active">
          Slide 1
        </div>
        <div class="carousel-item">
          Slide 2
        </div>
        <div class="carousel-item">
          Slide 3
        </div>
      </div>
      <a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

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

    }
}

Yes. I think jQuery will work fine here. I tired few but work works properly. — Habib, Oct 22 '18 at 01:31
Because you wanted to hide, then no one can go forward or backward. So check my answer to stop that navigation. it that is not helpful to address your issue let me know. — SilentCoder, Oct 22 '18 at 01:39

azeós · Accepted Answer · 2020-01-04T18:32:56.057

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div id="carousel-1" class="carousel slide">
    <div class="carousel-inner">
        <div class="carousel-item active">
            Slide 1
        </div>
        <div class="carousel-item">
            Slide 2
        </div>
        <div class="carousel-item">
            Slide 3
        </div>
    </div>
    <a class="carousel-control-prev d-none" href="#carousel-1" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next d-none" href="#carousel-1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Solved :) . Just one thing to know. Can i hide left control even on 2nd item ? — Habib, Oct 22 '18 at 02:58
@Habib arbitrary on the 2nd item? Or 2nd item will be the last one? The first `if` hides the `prev` control, so you could replace the statement with `(e.to == 0 || e.to == 1)`. But you will not be able to get back from the 2nd item... — azeós, Oct 22 '18 at 03:03

SilentCoder · Answer 2 · 2018-10-22T02:45:41.487

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

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div id="carousel-1" class="carousel slide" data-ride="carousel" data-wrap="false">

      <div class="carousel-inner">
        <div class="carousel-item active">
          <img width="900" src="https://cdn.mos.cms.futurecdn.net/FUE7XiFApEqWZQ85wYcAfM-970-80.jpg"/>
        </div>
        <div class="carousel-item">
           <img width="900" src=" https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=81a5f1725ca68c549e0054dcfdf269de&auto=format&fit=crop&w=1350&q=80"/>
        
        </div>
        <div  class="carousel-item">
           <img width="900" src="https://cdn.mos.cms.futurecdn.net/3YKAsCxSpoqFUEHyrQyfLb-650-80.jpg"/>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

Thanks it will help me. But how i hide left and right control ? 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. — Habib, Oct 22 '18 at 01:54
I have edited my code to hide arrow accordingly. Please check and mark as answer if you problem solve. — SilentCoder, Oct 22 '18 at 02:46

score 0 · Answer 3 · answered Apr 06 '20 at 17:00

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 Answers3