twitter-bootstrap bootstrap carousel 在第一个和最后一个隐藏控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20467666/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap carousel hide controls on first and last
提问by user667430
How can I hide the left control if the carousel is on the first item, and how can I hide the right control when the carousel is on the last item.
如果轮播位于第一个项目上，如何隐藏左侧控件，以及当轮播位于最后一个项目上时如何隐藏右侧控件。
My code below hides the control successfully but on page load it is as if the carousel first item is in the middle and the user can either go all the way through via the left or right controls.
我下面的代码成功隐藏了控件，但在页面加载时，就好像轮播第一个项目在中间一样，用户可以通过左侧或右侧控件一直浏览。
thanks
谢谢
回答by BENARD Patrick
$('#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();
}
}
回答by Fred K
The below code is an updated version of TheLittlePig's codefor Bootstrap 3 that works both for multiple carousels on the same page and for indicator actions. The explained code is here
下面的代码是TheLittlePig 的Bootstrap 3代码的更新版本，它适用于同一页面上的多个轮播和指示器操作。解释的代码在这里
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);
回答by starfry
Augmenting @TheLittlePig, it needs to be slightly different if you're using Bootstrap 3 because the event to attach the callback to is different: slid.bs.carousel. Also, if you have multiple carousels on one page you'll need to pass a unique css id for the carousel into the event handler. Here is a modified version that I use on my Rails site:
增强@TheLittlePig，如果您使用 Bootstrap 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>
That is repeated for each carousel. The <%=id%>is a ruby expression that is replaced by a unique id for the given carousel. Tweak that bit for your needs according to the language of your choice.
对每个轮播重复此操作。的<%=id%>是，由用于给定的圆盘传送带的唯一id替换红宝石表达。根据您选择的语言根据您的需要调整该部分。
The difference is that the carousel's id is passed into the event handler function as event data so that the event handler can operate on the correct carousel. I also changed the readyevent so that it triggers the slid.bs.carouselevent (instead of calling the function directly) so it passes the correct event data to the event handler for each carousel.
不同之处在于，carousel 的 id 作为事件数据传递到事件处理函数中，以便事件处理程序可以对正确的 carousel 进行操作。我还更改了ready事件，以便它触发slid.bs.carousel事件（而不是直接调用函数），以便将正确的事件数据传递给每个轮播的事件处理程序。
The event handler is a function called bs_carousel_slidthat I define elsewhere (those on Rails - it's in a file in app/assets/javascripts). The function is shown below:
事件处理程序是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();
}
}
回答by Chris Halcrow
IF YOU'RE USING BOOTSTRAP 3:
如果您使用引导程序 3：
The event is 'slid.bs.carousel' not 'slid'
事件是“slid.bs.carousel”而不是“slid”
$('.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();
}
}
