Question

我在多个引导程序轮播和同一页面上遇到一些困难，并且我想为每个轮播提供一些自定义jquery行为（当转盘在第一个项目时基本上隐藏左控件，并且当carosely打开时隐藏右控件最后一项。）

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

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

提前感谢您的帮助。

JQuery - 如何更新＆＃34;＃myCarousel-1＆＃34;所以它适用于任何＆＃34; myCarousel - ＃＆＃34;

$("#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>

Answer 1

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

管理多个幻灯片使用的类。在这种情况下，它是“carousel”。
使用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);

})

Answer 2

为了让它更好，有些建议：

CSS：

.left { display: none; }

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

JS：

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

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

很棒的剧本，非常感谢！

多个Bootstrap Carousels＆amp;用于控件的自定义jQuery

2 个答案: