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

Question

如果旋转木马在第一个项目上,如何隐藏左控件,如何在旋转木马位于最后一个项目时隐藏右控件.

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

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