Question

如果旋转木马在第一个项目上，如何隐藏左侧控件？如果旋转木马位于最后一个项目上，如何隐藏右侧控件。

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

感谢

Answer 1

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

以下代码是Bootstrap 3的TheLittlePig's code的更新版本，适用于同一页面上的多个轮播和指标操作。解释的代码是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 3

增加@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();
  }
}

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();

    }
}

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

4 个答案: