Bootstrap карусель. Скрыть «предыдущих» и «Next» кнопки на первом и последнем слайде - «слайд» событие не работает

Question

Я использую этот стандартный Bootstrap карусель:

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

, и я стараюсь, чтобы скрыть «предыдущий» и «Next» кнопки, соответственно, если пользователь находится на первые или последние пунктах карусели:

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

Carousel события документация - getbootstrap.com/javascript/#carousel-events