Bootstrap旋转木马。隐藏在第一和最后一张幻灯片“以前”和“下一个”按钮 - “幻灯片”事件不工作

Question

我使用这个标准引导旋转木马：

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <div class="carousel-caption"> 
       <h1>App Preview</h1> 
      </div> 
     </div> 

     <div class="item"> 
      <div class="carousel-caption"> 
       <h1>Contact Details</h1> 
      </div> 
     </div> 

     <div class="item"> 
      <div class="carousel-caption"> 
       <h1>Choose plan</h1> 
      </div> 
     </div> 

     <div class="item"> 
      4 
     </div> 
    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     @*<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>*@ 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     @*<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>*@ 
     <span class="sr-only">Next</span> 
    </a> 
</div> 

，我试图隐藏“上一个”和“下一个”按钮，如果用户位于轮播的第一个或最后一个项目上：

$('.carousel').carousel({ 
    interval: false, 
}) 

$('#myCarousel').on('slid', '', 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(); 

    } 
} 

虽然它不起作用。当我使用Chrome开发人员工具进行调试时，我可以看到事件已连接，但实际checkitem（）代码中的断点始终未命中，所以我不确定在触发事件时调试器是否不工作或者如果事件从未被触发。

（我包括下面的脚本）

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> 

Answer 1

尝试使用

$('#myCarousel').on('slid.bs.carousel', checkitem); 

但这只会隐藏你的按钮时， “下滑” 的事件发生。它适用于最后一个“下一个”，但它并不隐藏第一个“前一个”。要隐藏第一个“前一个”，你可以使用CSS。

http://jsfiddle.net/0bwnqahj/1/

Answer 2

这是为了得到这个工作充分，不滑触发刚过完整的脚本。正如米哈伊指出，由于某种原因，我需要使用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')) { 
     // Hide left arrow 
     $this.children('.left.carousel-control').hide(); 
     // But show right arrow 
     $this.children('.right.carousel-control').show(); 
    } else if ($('.carousel-inner .item:last').hasClass('active')) { 
     // Hide right arrow 
     $this.children('.right.carousel-control').hide(); 
     // But show left arrow 
     $this.children('.left.carousel-control').show(); 
    } else { 
     $this.children('.carousel-control').show(); 
    } 
} 

旋转木马事件文档 - getbootstrap.com/javascript/#carousel-events