0

I'm having a little difficulty with multiple bootstrap carousels and on same page and some custom jquery behavior I want for each carousel (basically hide left controls when carousel is on first item, and hide right controls when carosely is on last item.)

I'm able to get this working fine with one carousel on a page based on this stack overflow answer: bootstrap carousel hide controls on first and last

However when I have a second or third carousel on the page the jQuery/javascript only controls the first carousel. I understand why this is, but my question is how can I dynamically update the jquery based on which carousel a user happens to be scrolling through (myCarousel-1, myCarousel-2, etc...) so that all carousels have same behavior of hiding controls based on which item they are on.

Thanks in advance for the help.

JQuery - how to update the "#myCarousel-1" so that it functions for any "myCarousel-#"

$("#myCarousel-1").carousel({
  interval: false,
  wrap: false
});
var checkitem = function() {
  var $this;
  $this = $("#myCarousel-1");
  if ($("#myCarousel .carousel-inner .item:first").hasClass("active")) {
    $this.children(".left").hide();
    $this.children(".right").show();
  } else if ($("#myCarousel-1 .carousel-inner .item:last").hasClass("active")) {
    $this.children(".right").hide();
    $this.children(".left").show();
  } else {
    $this.children(".carousel-control").show();
  }
};
checkitem();
$("#myCarousel-1").on("slid.bs.carousel", "", checkitem);

Carousel HTML:

<div id="myCarousel-1" class="carousel slide hidden-xs">
  <div class="carousel-inner">
    <div class="item active">
      <div class="row" style="padding-left: 15px;">
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
      </div>
    </div>
    <div class="item">
      <div class="row" style="padding-left: 15px;">
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
      </div>
    </div>
    <div class="item">
      <div class="row" style="padding-left: 15px;">
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
      </div>
    </div>
  </div>
  <a class="carousel-control left" href="#myCarousel-1" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Prev</span></a></a>
  <a class="right carousel-control" href="#myCarousel-1" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span></a>
</div>

<div id="myCarousel-2" class="carousel slide hidden-xs">
  <div class="carousel-inner">
    <div class="item active">
      <div class="row" style="padding-left: 15px;">
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
      </div>
    </div>
    <div class="item">
      <div class="row" style="padding-left: 15px;">
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
      </div>
    </div>
    <div class="item">
      <div class="row" style="padding-left: 15px;">
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
        <div class="col-sm-3" style="padding: 5px 0px;"><img src="http://placehold.it/200x113" alt="Image" class="img-responsive hidden-xs"></div>
      </div>
    </div>
  </div>
  <a class="carousel-control left" href="#myCarousel-2" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Prev</span></a></a>
  <a class="right carousel-control" href="#myCarousel-2" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span></a>
</div>
Community
  • 1
  • 1
mk97
  • 264
  • 1
  • 6
  • 15

2 Answers2

2

http://jsfiddle.net/jd3c174c/1/

  1. to manage multiple slides used class. in this case it is "carousel".
  2. use slide.bs.carousel event. "This event fires immediately when the slide instance method is invoked."

JQ:

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

$('.carousel').on('slide.bs.carousel', function (obj) {
    //get current carousel
    var $CAR=$(this);

    //get curent slide index
    var currItem = $(obj.relatedTarget).index();
    //get the total number of slides
    var countItem = $CAR.find('.item').size();

    //if the current slide last, hide right arraow
    //otherwise show right arraow
    if(currItem==countItem-1) 
        $CAR.children(".right").hide();
    else
        $CAR.children(".right").show();

    //if the current slide first, hide left arraow
    //otherwise show left arraow
    if(currItem==0) 
        $CAR.children(".left").hide();
    else
        $CAR.children(".left").show();

    //console.log(currItem+'/'+countItem);

})
dm4web
  • 4,642
  • 1
  • 14
  • 20
0

To make it even better, some suggestions:

CSS:

.left { display: none; }

To hide left arrow on page load.

JS:

//console.log(currItem+1+'/'+countItem);

If you have, say, 14 slides... "14/14", not "13/14".

Awesome script, thanks a bunch!

Taty
  • 23
  • 5