多个Bootstrap轮播和自定义jQuery控件

debugcn 发表于 Dev

mk97

我在多个引导程序轮播和同一页面上以及每个轮播我想要的一些自定义jquery行为方面遇到了一些困难（当轮播位于第一个项目上时，基本上隐藏左控件，而当carosely位于最后一个项上时，则隐藏右控件。）

我能够基于此堆栈溢出答案在页面上的一个轮播上正常工作：引导轮播隐藏第一个和最后一个隐藏控件

但是，当我在页面上有第二个或第三个轮播时，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>

dm4web

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

})