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 the control successfully but on page load it is as if the carousel first item is in the middle and the user can either go all the way through via the left or right controls.

http://bootply.com/99354

thanks

Bootstrap 3 solution also working for multiple carousels on same page: http://stackoverflow.com/questions/11441474/stop-twitter-bootstrap-carousel-at-the-end-of-its-slides/29029947#29029947 — Karl Adler, Mar 13 '15 at 10:41

score 10 · Accepted Answer · edited Oct 19 '17 at 05:50

10

Bootply link

$('#myCarousel').on('slid', '', checkitem);  // on caroussel move
$('#myCarousel').on('slid.bs.carousel', '', checkitem); // on carousel move

$(document).ready(function(){               // on document ready
    checkitem();
});

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

edited Oct 19 '17 at 05:50

Komal12

3,340
4
16
25

answered Dec 09 '13 at 10:44

BENARD Patrick

30,363
16
99
105

1

I'm trying to use your code but the "if" control finds always that "active" class is on first item. P.S.: for Bootstrap3 the event is slid.bs.carousel – Fred K Jun 04 '14 at 20:10
@FredK Could you provide a fiddle with your code please ? I'll put an eye on it. – BENARD Patrick Jun 05 '14 at 07:15
Hi @TheLittlePig, thanks but I found the solution. The problems are that I've more than one carousel on the same page and your code doesn't expect the use of indicators. I will add here an updated answer here. For now, I posted the entire solution here: https://coderpills.wordpress.com/2014/06/05/how-to-hide-carousel-controls-on-first-and-last-items-in-bootstrap-3/ – Fred K Jun 05 '14 at 08:55

score 6 · Answer 2 · edited May 23 '17 at 12:17

The below code is an updated version of TheLittlePig's code for Bootstrap 3 that works both for multiple carousels on the same page and for indicator actions. The explained code is here

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

starfry · Answer 3 · 2014-05-08T16:13:20.633

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:

<script>
//<![CDATA]
id = '#carousel-<%=id%>';
$(id).on('slid.bs.carousel', { id: id }, bs_carousel_slid);
$(document).ready(function(){ $(id).trigger('slid.bs.carousel'); });       
//]]>
</script>

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

you don't need to pass the ID in this way, you may use the event data in bs.carousel. Take look at this solution: http://stackoverflow.com/questions/11441474/stop-twitter-bootstrap-carousel-at-the-end-of-its-slides/29029947#29029947 — Karl Adler, Mar 13 '15 at 10:45

score 1 · Answer 4 · answered Oct 27 '15 at 00:36

IF YOU'RE USING BOOTSTRAP 3:

The event is 'slid.bs.carousel' not 'slid'

$('.carousel').carousel({
    interval: false,
})

$(document).ready(function () {               // on document ready
    checkitem();
});

$('#myCarousel').on('slid.bs.carousel', checkitem);

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

    }
}

bootstrap carousel hide controls on first and last

4 Answers4

Linked