多引導程序傳送帶＆自定義jQuery的控件

Question

我有多個引導程序傳送帶，並在同一頁和一些自定義jquery行爲，我想要爲每個旋轉木馬（基本上隱藏左旋鈕，當旋轉木馬是在第一項上，並隱藏當carosely是在最後一個項目權限控制）

我能夠在此基礎上堆棧溢出的答案與一個轉盤讓一個頁面上此工作正常。當我有一個第二或第三輪播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> 

Answer 1

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

1. 來管理多個幻燈片使用的類。在這種情況下，它是「旋轉木馬」。
2. 使用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」。

真棒腳本，謝謝一堆！