Search code examples
javascriptbootstrap-4carousel

Bootstrap Carousel event based on slide index

I have this simple html page.

<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
    <body>
        <div id="MyCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img height="500px" class="d-block w-100" src="1.jpg" alt="First">
    </div>
    <div class="carousel-item">
      <img height="500px" class="d-block w-100" src="2.jpg" alt="Second">
    </div>
    <div class="carousel-item">
      <img height="500px" class="d-block w-100" src="3.jpg" alt="Third">
    </div>
  </div>
  <a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <img id="test" height="100px" width="100px" src="4.png" alt="Fourth">
  <p id="test2" >This is a paragraph.</p>
</div>
<script>
$('#MyCarousel').on('slide.bs.carousel', function onSlide (ev) {
  var id = ev.relatedTarget.id;
  switch (id) {
    case "1":
      window.alert(1);
      break;
    case "2":
      window.alert(2);
      break;
    case "3":
      window.alert(3);
      break;
    default:
      window.alert(4);
  }
});
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>

The carousel id is #MyCarousel
I'm using Bootstrap 4.0.0
What I want is to show an alert when i change the carousel slide.
But it doesn't work, how can i fix it?
Maybe it's the onSlide function that is wrong

Solution

  • Your main problem is that you are trying to use jQuery before you import it. If you import it before your JS your code will run and will start up alert boxes. So the solution in your case is to import <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> before any calls to $

    However, you will still have to work on code that identifies id. Happy to help you with it further if you're still stuck, let me know.