Encountering an issue with the carousel functionality. The button is supposed to switch between play and pause, triggering the carousel accordingly. However, upon clicking the button, it seems to switch too quickly without properly pausing or playing the carousel. Additionally, the timer function does not seem to be working as expected. This could potentially indicate a malfunction within the jQuery code located in the root folder.
<div class="container">
<div class="row row-content">
<div class="col">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
...
<!-- <div class="btn-group" id="carouselButton">
<button class="btn btn-danger btn-sm" id="carousel-pause">
<span class="fa fa-pause"></span>
</button>
<button class="btn btn-danger btn-sm" id="carousel-play">
<span class="fa fa-play"></span> -->
<button class="btn btn-danger btn-sm" id="carouselButton">
<span id="carousel-button-icon" class="fa fa-pause"></span>
</button>
</div>
</div>
</div>
</div>
</div>
Jquery below here
$(document).ready(function () {
$('#mycarousel').carousel({ interval: 2000 });
$('#carouselButton').click(function () {
if ($('#carouselButton').children('span').hasClass('fa-pause')){
$('#mycarousel').carousel('pause');
$('#carouselButton').children('span').removeClass('fa-pause');
$('#carouselButton').children('span').addClass('fa-play');
}
else if ($('#carouselButton').children('span').hasClass('fa-play')) {
$('#mycarousel').carousel('cycle');
$('#carouselButton').children('span').removeClass('fa-play');
$('#carouselButton').children('span').addClass('fa-pause');
}
});
});