title: bootstrap carousel slide event not working
body: <p>I am trying to add slide event to carousel but its not firing up</p>
  
  <pre><code>&lt;div id="background-carousel"&gt;
      &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
        &lt;div class="carousel-inner"&gt;
          &lt;div class="item active" style="background-image:url('images/Home BG 1.jpg')"&gt;&lt;/div&gt;
          &lt;div class="item" style="background-image:url('images/Home BG 3.jpg')"&gt;&lt;/div&gt;
          &lt;div class="item" style="background-image:url('images/home_bg2.jpg')"&gt;&lt;/div&gt;  
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>my javascript but its not working and not showing any alert on image slide</p>
  
  <pre><code>  $( document ).ready(function() {
  
  
       $('#myCarousel').carousel({
    interval: 4000
   });
  
   $('#myCarousel').on('slide', function () {
    alert("Slide Event");
   // console.log('slid event');
    });
  
    });
  </code></pre>