CODEWITHSUNDEEP
javascriptbootstrap-4carousel
user16712640
user16712640

Reputation:

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

Upvotes: 0

Views: 1701

Answers (2)

Sercan
Sercan

Reputation: 5081

The onSlide event was not working because the application did not recognize the jQuery CDN reference. The warning was shown when I made the following edit. However, you cannot read the id value directly from the variable ev.relatedTarget.

$('#MyCarousel').on('slide.bs.carousel', function onSlide (ev) {
  var id = ev.relatedTarget.id;
  console.log(ev);
  switch (id) {
    case "1":
      window.alert(1);
      break;
    case "2":
      window.alert(2);
      break;
    case "3":
      window.alert(3);
      break;
    default:
      window.alert(4);
  }
});
<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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</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="https://picsum.photos/200/300" alt="First">
    </div>
    <div class="carousel-item">
      <img height="500px" class="d-block w-100" src="https://picsum.photos/200/300" alt="Second">
    </div>
    <div class="carousel-item">
      <img height="500px" class="d-block w-100" src="https://picsum.photos/200/300" 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="https://picsum.photos/200/300" alt="Fourth">
  <p id="test2" >This is a paragraph.</p>
</div>

<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>

Upvotes: 0

akds
akds

Reputation: 681

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.

Upvotes: 0

Related Questions