Here is a simple HTML page I have created.
<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 ID of the carousel is #MyCarousel.
Bootstrap version being used is 4.0.0.
I want to display an alert when changing the carousel slide, but it's not working. Any suggestions on how to fix it?
Possibly the issue lies with the onSlide function.