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
  • Where do you put this code? Didn’t work for me, I can still see the arrows.

    • 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.

  • 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.

  • 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

Categories

Category BootstrapCategory CoffeescriptCategory DrupalCategory GravCategory HTMLCategory JavascriptCategory JoomlaCategory jQueryCategory LaravelCategory MagentoCategory PHPCategory SharePointCategory SpringCategory ThymeleafCategory WordPressCategory Workflow

Comments

Developed and designed by Netgloo
© 2017 Netgloo