bootstrap carousel隐藏第一个和最后一个控件

如果转盘位于第一个项目上，如何隐藏左控件，以及当转盘位于最后一个项目时如何隐藏右控件。

我的下面的代码成功地隐藏了控件，但是在页面加载时，就好像旋转木马的第一个项目在中间，用户可以通过左或右控件一直进入。

http://bootply.com/99354

谢谢

Answer 1

Bootply链接

$('#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的 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); 

Answer 3

增加@TheLittlePig，如果你使用Bootstrap 3，它需要略有不同，因为附加回调的事件是不同的： slid.bs.carousel 。 此外，如果您在一个页面上有多个轮播，则需要将轮播的唯一css ID传递给事件处理程序。 这是我在Rails网站上使用的修改版本：

每个转盘都会重复这一过程。 <%=id%>是一个ruby表达式，由给定轮播的唯一ID替换。 根据您选择的语言调整您的需求。

不同之处在于，轮播的id作为事件数据传递到事件处理函数中，以便事件处理程序可以在正确的轮播上运行。 我还更改了ready事件，以便它触发slid.bs.carousel事件（而不是直接调用函数），因此它将正确的事件数据传递给每个轮播的事件处理程序。

事件处理程序是一个名为bs_carousel_slid的函数，我在其他地方定义（Rails上的函数 – 它位于app/assets/javascripts中的文件中）。 function如下所示：

 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 4

如果您使用BOOTSTRAP 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(); } }