如何为(多个)两个不同的引导旋转木马添加播放/暂停按钮

Question

我看过其他关于堆栈溢出的例子，试图添加这些轮播控件，我能够在我的页面上使用其中一个轮播控件，但是另一组控件将不起作用。

这是我目前拥有的。

$(function() {
$('#keynoteSpeakersCarouselPlayButton').click(function() {
$(this).closest('.carousel').carousel('cycle');
});
$('#keynoteSpeakersCarouselPauseButton').click(function() {
$(this).closest('.carousel').carousel('pause');
});
$('#sponsoredStreamsCarouselPlayButton').click(function() {
$(this).closest('.carousel').carousel('cycle');
});
$('#sponsoredStreamsCarouselPauseButton').click(function() {
$(this).closest('.carousel').carousel('pause');
});
}); 

我认为解决方案不会与jQuery工作

Answer 1

从我对bootstrap carousel的理解来看，如果一个方法处于过渡的中间，它将被忽略。你需要添加一个事件监听器并在其中执行暂停。我会设置一个标志，在事件侦听器中检查它，然后重置标志。此外，我将添加id到每个旋转木马，使其更直接地选择。如下所示:

let flagPause = false;
let flagResume = false;
const carousel1 = document.getElementById('carousel1id');
carousel1.addEventListener('slid.bs.carousel', function() {
if (flagPause == true) {
carousel1.carousel('pause');
flagPause = false;
}
if (flagResume == true) {
carousel1.carousel('cycle');
flagResume = false;
}
});
$('#keynoteSpeakersCarouselPlayButton').click(function() {
flagResume = true;
});
$('#keynoteSpeakersCarouselPauseButton').click(function() {
flagPause = true;
});