bootstrap carousel hide controls on first and last

Question

How can I hide the left control if the carousel is on the first item, and how can I hide the right control when the carousel is on the last item.

My code below hides

Answer 1

Augmenting @TheLittlePig, it needs to be slightly different if you're using Bootstrap 3 because the event to attach the callback to is different: slid.bs.carousel. Also, if you have multiple carousels on one page you'll need to pass a unique css id for the carousel into the event handler. Here is a modified version that I use on my Rails site:

That is repeated for each carousel. The <%=id%> is a ruby expression that is replaced by a unique id for the given carousel. Tweak that bit for your needs according to the language of your choice.

The difference is that the carousel's id is passed into the event handler function as event data so that the event handler can operate on the correct carousel. I also changed the ready event so that it triggers the slid.bs.carousel event (instead of calling the function directly) so it passes the correct event data to the event handler for each carousel.

The event handler is a function called bs_carousel_slid that I define elsewhere (those on Rails - it's in a file in app/assets/javascripts). The function is shown below:

function bs_carousel_slid(event)
{
  var id = event.data.id;
  var $this = $(id);
  if($(id + ' .carousel-inner .item:first').hasClass('active')) {
    $this.children('.left.carousel-control').hide();
  } else if($(id + ' .carousel-inner .item:last').hasClass('active')) {
    $this.children('.right.carousel-control').hide();
  } else {
    $this.children('.carousel-control').show();
  }
}