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

Gianluca 5 June 2014 Comments

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

Gianluca

Web designer and front-end developer at Netgloo. When the sun goes down he's a senior vampire and an experimental artist in illustration, literature and music.

Bootstrap

Pablo Artee

Where do you put this code? Didn’t work for me, I can still see the arrows.
- Gianluca
  
  Hi Pablo,
  put the code inside your main Javascript (or Coffescript) file. Also, be sure that you’re using Bootstrap 3+ and the class of the HTML elements you’re using are the same of the ones used in the jQuery selectors.
Pablo Artee

I’m using Bootstrap 3.2.0 and have the same clases, that’s wierd.
I put the code at the top of a the carousel code.

Will try to make it work, thanks anyway.
Pablo Artee

Nevermind, it was that. My mistake, thank you so much!
Zeeshan Shaikh

Great… it’s working for me. Thank you very much.
Akshay Tambekar

code running properly but anchor tag are not hidding….!

Previous

Next

var checkitem = function() {
var $this;
$this = $(“#teamCarousel”);
if ($(“#teamCarousel .carousel-inner .item:first”).hasClass(“active”)) {

$this.children(“.left”).hide();
$this.children(“.right”).show();
} else if ($(“#teamCarousel .carousel-inner .item:last”).hasClass(“active”)) {

$this.children(“.right”).hide();
$this.children(“.left”).show();
} else {

$this.children(“.carousel-control”).show();
}
};

checkitem();

$(“#teamCarousel”).on(“slid.bs.carousel”, “”, checkitem);

above functionality runs properly but tags are not hide or show
David Bjorgen

Works perfectly. Thanks!
- David Bjorgen
  
  I’ve run into an issue where I have multiple carousels on the same page. Since I’m targeting via class instead of ID, the beginning arrow disappears in the first carousel, and the ending arrow disappears in the last carousel. How might I get around this?
  - David Bjorgen
    
    Here are my modifications to make it work with classes:
    
    $(‘.carousel’).each(function(index) {
    $(this).on(‘slid.bs.carousel’, ”, function() {
    var $this = $(this);
    if ($this.find(“.carousel-inner .item:first”).hasClass(“active”)) {
    $this.children(“.left”).hide();
    $this.children(“.right”).show();
    } else if ($this.find(” .carousel-inner .item:last”).hasClass(“active”)) {
    $this.children(“.right”).hide();
    $this.children(“.left”).show();
    } else {
    $this.children(“.carousel-control”).show();
    }
    });
    });
    
    Then I just hid the initial (left) arrow on page load via CSS.