1

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

  });
Alive to die - Anant
  • 70,531
  • 10
  • 51
  • 98
Adeel Pervaiz
  • 29
  • 1
  • 1
  • 3
  • 1
    Possible duplicate of [Fire event on Bootstrap carousel slide issue](https://stackoverflow.com/questions/20129290/fire-event-on-bootstrap-carousel-slide-issue) – Alive to die - Anant Aug 02 '17 at 06:41

2 Answers2

6

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.

Rahul Verma
  • 398
  • 1
  • 3
  • 12
2

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');
  });
});
Alive to die - Anant
  • 70,531
  • 10
  • 51
  • 98
OK200
  • 727
  • 6
  • 22
  • @AlivetoDie do i need to delete it – OK200 Aug 02 '17 at 06:42
  • pls check https://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp event : slid.bs.carousel will be triggered after the carousel sliding is completed. event : slide.bs.carousel will be triggered before the carousel sliding is about to start. – OK200 Aug 02 '17 at 06:44
  • 2
    still not working for me, don't understand why!! I'm using the same code – Khaled AbuShqear Jul 10 '18 at 21:53