bootstrap旋轉木馬隱藏控制第一個和最後一個

Question

如何在傳送帶位於第一個項目時隱藏左側控件，以及當傳送帶位於最後一個項目時如何隱藏右側控件。

我的代碼在下面隱藏了控件，但是在頁面加載時，它好像輪播第一項在中間，用戶可以通過左側或右側控件一路通過。

http://bootply.com/99354

感謝

Answer 1

Bootply link

$('#myCarousel').on('slid', '', checkitem); // on caroussel move 
$('#myCarousel').on('slid.bs.carousel', '', checkitem); // on carousel move 

$(document).ready(function(){    // on document ready 
    checkitem(); 
}); 

function checkitem()      // check function 
{ 
    var $this = $('#myCarousel'); 
    if($('.carousel-inner .item:first').hasClass('active')) { 
     $this.children('.left.carousel-control').hide(); 
     $this.children('.right.carousel-control').show(); 
    } else if($('.carousel-inner .item:last').hasClass('active')) { 
     $this.children('.left.carousel-control').show(); 
     $this.children('.right.carousel-control').hide(); 
    } else { 
     $this.children('.carousel-control').show(); 
    } 
} 

Answer 2

增廣@TheLittlePig，它需要如果你使用引導3，因爲事件附加回調會略有不同，以不同的是： slid.bs.carousel。另外，如果您在一個頁面上有多個輪播，則需要將輪播的唯一css ID傳遞給事件處理程序。以下是我在Rails網站上使用的修改版本：

<script> 
//<![CDATA] 
id = '#carousel-<%=id%>'; 
$(id).on('slid.bs.carousel', { id: id }, bs_carousel_slid); 
$(document).ready(function(){ $(id).trigger('slid.bs.carousel'); });  
//]]> 
</script> 

對每個輪播重複都會重複該操作。 <%=id%>是一個ruby表達式，由給定輪播的唯一標識替代。根據您選擇的語言調整一下您的需求。

區別在於傳送帶的ID作爲事件數據傳遞到事件處理函數中，以便事件處理程序可以在正確的傳送帶上進行操作。我還更改了ready事件，以便它觸發slid.bs.carousel事件（而不是直接調用該函數），以便將正確的事件數據傳遞給每個輪播的事件處理程序。

事件處理程序是一個叫做bs_carousel_slid的函數，我在別處定義了這些函數（那些在Rails上 - 它在app/assets/javascripts的文件中）。功能如下所示：

function bs_carousel_slid(event) 
{ 
    var id = event.data.id; 
    var $this = $(id); 
    if($(id + ' .carousel-inner .item:first').hasClass('active')) { 
    $this.children('.left.carousel-control').hide(); 
    } else if($(id + ' .carousel-inner .item:last').hasClass('active')) { 
    $this.children('.right.carousel-control').hide(); 
    } else { 
    $this.children('.carousel-control').show(); 
    } 
} 

Answer 3

下面的代碼是TheLittlePig's code自舉3的更新版本都在同一頁上的多個轉盤和指示行動工作。所說明的代碼是here

checkitem = function() { 
    var $this; 
    $this = $("#slideshow"); 
    if ($("#slideshow .carousel-inner .item:first").hasClass("active")) { 
    $this.children(".left").hide(); 
    $this.children(".right").show(); 
    } else if ($("#slideshow .carousel-inner .item:last").hasClass("active")) { 
    $this.children(".right").hide(); 
    $this.children(".left").show(); 
    } else { 
    $this.children(".carousel-control").show(); 
    } 
}; 

checkitem(); 

$("#slideshow").on("slid.bs.carousel", "", checkitem); 

Answer 4

如果您使用的自舉3：

的事件是 'slid.bs.carousel' 而不是 '滑動'

$('.carousel').carousel({ 
    interval: false, 
}) 

$(document).ready(function() {    // on document ready 
    checkitem(); 
}); 

$('#myCarousel').on('slid.bs.carousel', checkitem); 

function checkitem()      // check function 
{ 
    var $this = $('#myCarousel'); 
    if ($('.carousel-inner .item:first').hasClass('active')) { 
     $this.children('.left.carousel-control').hide(); 
    } else if ($('.carousel-inner .item:last').hasClass('active')) { 
     $this.children('.right.carousel-control').hide(); 
    } else { 
     $this.children('.carousel-control').show(); 

    } 
}