How to hide carousel controls on first and last items in Bootstrap 3

When you use Bootstrap carousel with wrap: false option you could want to hide control left button (with class .left) on first item and the right one (with class .right) on the last item.

$("#slideshow").carousel({
  interval: false,
  wrap: false
});

The below code works both for control actions (that is clicking on .left or .right element) and for indicator actions (that is clicking on the carousel dots).
Notice: if you have more than one carousel on the same page it’s extremely important to specify the ID in the jQuery selectors, otherwise the script could checks the active class of another carousel.

Javascript

var checkitem = function() {
  var $this;
  $this = $("#slideshow");
  if ($("#slideshow .carousel-inner .item:first").hasClass("active")) {
    $this.children(".left").hide();
    $this.children(".right").show();
  } else if ($("#slideshow .carousel-inner .item:last").hasClass("active")) {
    $this.children(".right").hide();
    $this.children(".left").show();
  } else {
    $this.children(".carousel-control").show();
  }
};

checkitem();

$("#slideshow").on("slid.bs.carousel", "", checkitem);

Coffeescript

#
# Function: Hide/Show carousel controls depending on active item
#
checkitem = ->
  $this = $("#slideshow")
  if $("#slideshow .carousel-inner .item:first").hasClass("active")
    $this.children(".left").hide()
    $this.children(".right").show()
  else if $("#slideshow .carousel-inner .item:last").hasClass("active")
    $this.children(".right").hide()
    $this.children(".left").show()
  else
    $this.children(".carousel-control").show()
  return
 
# Check active slide at the run
checkitem()
 
# Check active item at every slide moves
$("#slideshow").on "slid.bs.carousel", "", checkitem