7

如果轮播位于第一项上，如何隐藏左侧控件，以及当轮播位于最后一项上时，如何隐藏右侧控件。

我下面的代码成功地隐藏了控件，但是在页面加载时，就好像轮播的第一项在中间，用户可以通过左侧或右侧控件一路浏览。

http://bootply.com/99354

谢谢

4

4 回答 4

10

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();
    } 
}
于 2013-12-09T10:44:40.293 回答
6

下面的代码是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);
于 2014-06-05T09:09:19.207 回答
2

增强@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();
  }
}
于 2014-05-08T16:05:45.510 回答
1

如果您使用的是引导 3：

该事件是“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();

    }
}
于 2015-10-27T00:36:09.627 回答