引导转盘启动/停止功能

我在引导程序转盘中添加了一个播放/暂停按钮,但似乎不起作用。我实现了我认为适合播放/暂停键的JavaScript。我希望播放/暂停按钮能正常启动和停止转盘动画。以下是我使用的html和Javascript:

<div class="row">
<div class="col-xs-1 col-sm-1 col-lg-1 col-xl-1">
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-xl-1">
<button class="carousel-control-prev" type="button" 
data-bs-target="#carouselExampleFade" data-bs- 
slide="prev">
<span class="carousel-control-prev-icon" aria- 
hidden="true">Prev</span>
<span class="visually-hidden">Previous</span>
</button>
</div>
<div class="col-xs-8 col-sm-8 col-lg-8 col-xl-8">
<div class="container">
<button type="button" 
id="playPause">Play/Pause</button>
<div id="carouselExampleFade" class="carousel slide 
carousel-fade mx-auto my-auto" data- 
interval="false">

<div class="carousel-inner">
<div class="carousel-item active">
<div class="d-flex justify-content-center">
<div class="title-text">
<h1 aria-describedby="desctext">Who We Are &#x25BD; 
</h1>
            
<div id="desctext"> Some text

</div>
</div>
</div>
</div>

<div class="carousel-item">
<div class="d-flex justify-content-center">
<div class="title-text2">
<h1 aria-describedby="desctext2">Our Mission 
&#x25BD; </h1>
                
<div id="desctext2">Some text
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-xl-1">

<button class="carousel-control-next" type="button" 
data-bs-target="#carouselExampleFade" data-bs- 
slide="next">
<span class="carousel-control-next-icon" aria- 
hidden="true">Next</span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-xl-1">
</div>

<script>
                            
$(document).ready(function() {
                                
$("#playPause").click(function() {
                                    if 
($("#carouselExampleFade").attr("data-interval")) {
                                    
$("#carouselExampleFade").removeAttr("data- 
interval");
$(".carousel-item>.active").removeAttr("active");
                                    
setTimeout(function() {
                                        
$(".carousel-control-next").trigger("click");
                                        
$(".carousel-inner").trigger("mouseenter");
                                        
$("#carouselExampleFade").trigger("mouseenter");
}, 500);
} else {
                                    
$("#carouselExampleFade").attr("data-interval", 
"500");
                                    
setTimeout(function() {
                                        
$(".carousel-control-next").trigger('click');
                                        
$(".carousel-inner").trigger("mouseenter");
                                        
$("#carouselExampleFade").trigger("mouseenter");
                                        
$("#carouselExampleFade").trigger("mouseleave");
}, 1000);
}
});

$(".carousel-control-prev").click(function() {
                                
$("#carouselExampleFade").carousel("prev");
});
$(".carousel-control-next").click(function() {
                                
$("$#carouselExampleFade").carousel("next");
});
});
</script>

当我按下next时,我现在拥有的代码会正常地点击幻灯片,但在那之后,如果我按下prev,动画会自动启动,并且当我按下播放/暂停按钮时,它不会冻结动画。动画会继续从一张幻灯片转到另一张幻灯片。有什么想法吗?