引导程序转盘隐藏第一个和最后一个控件

bootstrap carousel hide controls on first and last

本文关键字：最后一个 控件 第一个 隐藏 引导程序      更新时间：2024-05-05

如果转盘在第一个项目上，我如何隐藏左侧控件，如果转盘在最后一个项目上我如何隐藏右侧控件。

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

http://bootply.com/99354

感谢

引导链接

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

下面的代码是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);

Augmenting@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>

对每个转盘重复此操作。<%=id%>是一个ruby表达式，它被给定转盘的唯一id所取代。根据你选择的语言，根据你的需要调整一下。

不同之处在于，转盘的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();
  }
}

如果您正在使用BOOTSTRAP 3:

事件是"滑动.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();
    }
}
相关文章：