title: Bootstrap carousel. Hide 'previous' and 'next' buttons on first and last slide - 'slide' event not working
body: <p>I'm using this standard Bootstrap carousel:</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
          &lt;div class="item active"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h1&gt;App Preview&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="item"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h1&gt;Contact Details&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="item"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h1&gt;Choose plan&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="item"&gt;
              4
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Left and right controls --&gt;
      &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
          @*&lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;*@
          &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
          @*&lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;*@
          &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I'm trying to hide the 'previous' and 'next' buttons respectively, if the user is on the first or last items of the carousel:</p>
  
  <pre><code>$('.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();
  
      }
  }
  </code></pre>
  
  <p>It doesn't work though. When I debug using the Chrome developer tools, I can see the event being hooked up, but the breakpoint in the actual checkitem() code is never hit, so I'm not sure if the debugger just doesn't work when events are triggered or if the event is never being triggered.</p>
  
  <p>(I'm including the following scripts)</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  &lt;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"&gt;&lt;/script&gt;
  </code></pre>