用于控件的多个引导轮播和自定义 jQuery答案

【问题标题】：Multiple Bootstrap Carousels & Custom jQuery for controls用于控件的多个引导轮播和自定义 jQuery
【发布时间】：2014-12-02 20:41:31
【问题描述】：

我在使用多个引导轮播和在同一页面上以及我想要为每个轮播的一些自定义 jquery 行为时遇到了一点困难（基本上，当轮播在第一项时隐藏左控件，当轮播在最后一项时隐藏右控件.)

根据这个堆栈溢出答案，我可以在页面上使用一个轮播来正常工作：bootstrap carousel hide controls on first and last

但是，当我在页面上有第二个或第三个轮播时，jQuery/javascript 只控制第一个轮播。我明白为什么会这样，但我的问题是如何根据用户碰巧滚动浏览的轮播（myCarousel-1、myCarousel-2 等）动态更新 jquery，以便所有轮播具有相同的行为根据控件所在的项目隐藏控件。

提前感谢您的帮助。

JQuery - 如何更新“#myCarousel-1”，使其适用于任何“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);

轮播 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>

【问题讨论】：

标签： jquery twitter-bootstrap-3

【解决方案1】：

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

管理多个幻灯片使用的类。在这种情况下，它是“轮播”。
使用 slide.bs.carousel 事件。 "当调用幻灯片实例方法时立即触发此事件。"

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

})

【讨论】：

【解决方案2】：

为了让它变得更好，一些建议：

CSS：

.left { display: none; }

在页面加载时隐藏左箭头。

JS：

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

如果您有 14 张幻灯片...“14/14”，而不是“13/14”。

很棒的脚本，非常感谢！

【讨论】：