Carousel Events in Bootstrap

How to attach event with carousel slide in Bootstrap?

Carousel with alert function

We can get the alert function when the image is getting slide by using slide.bs.carousel

<style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>
<div class="container">
 <h2>Carousel slide with alert function</h2>
  <div id="myCarousel" class="carousel slide">   
    <ol class="carousel-indicators">
      <li class="item1 active"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      <li class="item4"></li>
    </ol>  
    <div class="carousel-inner" role="listbox">
      <div class="item active">
          <img src="apple-01.jpg" />
      </div>
      <div class="item">
          <img src="download.jpg" />
      </div>   
      <div class="item">
          <img src="images%20(1).jpg" />
      </div>
      <div class="item">
          <img src="images.jpg" />
      </div>
    </div> 
    <a class="left carousel-control" href="#myCarousel" role="button">
      <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">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<script>
    $(document).ready(function () {       
        $("#myCarousel").carousel();        
        $(".item1").click(function () {
            $("#myCarousel").carousel(0);
        });
        $(".item2").click(function () {
            $("#myCarousel").carousel(1);
        });
        $(".item3").click(function () {
            $("#myCarousel").carousel(2);
        });
        $(".item4").click(function () {
            $("#myCarousel").carousel(3);
        });       
        $(".left").click(function () {
            $("#myCarousel").carousel("prev");
        });
        $(".right").click(function () {
            $("#myCarousel").carousel("next");
        });
        $("#myCarousel").on('slide.bs.carousel', function () {
            alert('A new slide is about to be shown!');
        });
    });
</script>
</body>

In the above code snippet we have defined the carousel sliding image
In the next line we have created div element with id as #mycarousel and class value as carousel slide with
In the next line we have created <ol> element with class value as carousel-indicators and role as list box to create the list values
In the next line we have created div with class value as carousel-inner to create the images and created the symbols to change the images
In the next line we have used the script function to call the buttons in the carousel, we have (#mycarousel)
In the next line we are calling list values using item values
In the last line we are using $("#mycarousel") with slide.bs.carousel which gives the alert function when the image is going to slide

output

slid.bs.carousel

It is used to get the alert after the image completes sliding by using slid.bs.carousel

 <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>
<div class="container">
  <h2>Carousel Events - slid.bs.carousel</h2>
  <p>It occurs when the slide has completed </p>
  <div id="myCarousel" class="carousel slide">  
    <ol class="carousel-indicators">
      <li class="item1 active"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      <li class="item4"></li>
    </ol>  
    <div class="carousel-inner" role="listbox">
      <div class="item active">
          <img src="apple-01.jpg" />
      </div>
      <div class="item">
          <img src="download.jpg" />
      </div>
   
      <div class="item">
          <img src="images%20(1).jpg" />
      </div>
      <div class="item">
          <img src="images.jpg" />
      </div>
    </div>    
    <a class="left carousel-control" href="#myCarousel" role="button">
      <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">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<script>
    $(document).ready(function () {      
        $("#myCarousel").carousel();   
        $(".item1").click(function () {
            $("#myCarousel").carousel(0);
        });
        $(".item2").click(function () {
            $("#myCarousel").carousel(1);
        });
        $(".item3").click(function () {
            $("#myCarousel").carousel(2);
        });
        $(".item4").click(function () {
            $("#myCarousel").carousel(3);
        });
        $(".left").click(function () {
            $("#myCarousel").carousel("prev");
        });
        $(".right").click(function () {
            $("#myCarousel").carousel("next");
        });

        $("#myCarousel").on('slid.bs.carousel', function () {
            alert('The carousel has finished sliding from one item to another!');
        });
    });
</script>
</body>

slid.bs.carousel

In the above code snippet we have defined the carousel sliding image
In the next line we have created div element with id as #mycarousel and class value as carousel slide with
In the next line we have created <ol> element with class value as carousel-indicators and role as list box to create the list values
In the next line we have created div with class value as carousel-inner to create the images and created the symbols to change the images
In the next line we have used the script function to call the buttons in the carousel, we have (#mycarousel)
In the next line we are calling list values using item values
In the last line we are using $("#mycarousel") with slid.bs.carousel which gives the alert function after the sliding of image is done