好問題。我也無法{ pause:null }按照你的意愿上班。但是更多地挖掘這個，我得到了一個可行的解決方案......
關鍵是在div上切換data-interval屬性carousel
但這并沒有啟動循環，觸發啟動......我們要么必須手動懸停和懸停......或者自動化它（我們做了）
但是由于通過 jQuery 添加/刪除這個屬性有一些滯后，我們（hackish-ly）添加一個setTimeout來處理這個
下面的工作片段：
$(document).ready(function() {
$('#playPause').click(function() {
if ($("#myCarousel").attr("data-interval")) {
$("#myCarousel").removeAttr("data-interval");
$(".carousel-item>.active").removeAttr("active");
setTimeout(function() {
$(".carousel-control-next").trigger('click');
$(".carousel-inner").trigger('mouseenter');
$("#myCarousel").trigger('mouseenter');
}, 500);
} else {
$("#myCarousel").attr("data-interval", "500");
setTimeout(function() {
$(".carousel-control-next").trigger('click');
$(".carousel-inner").trigger('mouseenter');
$("#myCarousel").trigger('mouseenter');
$("#myCarousel").trigger('mouseleave');
}, 1000);
}
});
// Enable Carousel Indicators
$(".item1").click(function() {
$("#myCarousel").carousel(0);
});
$(".item2").click(function() {
$("#myCarousel").carousel(1);
});
$(".item3").click(function() {
$("#myCarousel").carousel(2);
});
// Enable Carousel Controls
$(".carousel-control-prev").click(function() {
$("#myCarousel").carousel("prev");
});
$(".carousel-control-next").click(function() {
$("#myCarousel").carousel("next");
});
});
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container mt-3">
<button type='button' id='playPause'>Play / Pause</button>
<!-- The carousel -->
<div id="myCarousel" class="carousel slide mt-4">
<!-- Indicators -->
<ul class="carousel-indicators">
<li class="item1 active"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
