CODEWITHSUNDEEP
jquerytwitter-bootstrap
Adeel Pervaiz
Adeel Pervaiz

Reputation: 29

bootstrap carousel slide event not working

I am trying to add slide event to carousel but its not firing up

<div id="background-carousel">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="item active" style="background-image:url('images/Home BG 1.jpg')"></div>
        <div class="item" style="background-image:url('images/Home BG 3.jpg')"></div>
        <div class="item" style="background-image:url('images/home_bg2.jpg')"></div>  
      </div>
    </div>
</div>

my javascript but its not working and not showing any alert on image slide

  $( document ).ready(function() {


     $('#myCarousel').carousel({
  interval: 4000
 });

 $('#myCarousel').on('slide', function () {
  alert("Slide Event");
 // console.log('slid event');
  });

  });

Upvotes: 1

Views: 11833

Answers (2)

OK200
OK200

Reputation: 757

Bootstrap carousel provide events while slide are:-

  1. slid.bs.carousel

  2. slide.bs.carousel

Check below:-

$(document).ready(function(){
   $("#myCarousel").on('slid.bs.carousel', function () {
     alert('Finished sliding');
   });
});

Or

$(document).ready(function(){
  $("#myCarousel").on('slide.bs.carousel', function () {
     alert('Finished sliding');
  });
});

Upvotes: 2

Rahul Verma
Rahul Verma

Reputation: 398

Try This

$('#myCarousel').on('slide.bs.carousel', function () {
    alert("Slide Event");
    //console.log('slid event');
});

There are two supported methods

slide.bs.carousel This event fires immediately when the slide instance method is called.

slid.bs.carousel This event is fired when the carousel has completed its slide transition.

Upvotes: 6

Related Questions