Javascript 如何同步两个旋转木马滑块-推特引导

我在一个页面上有两个滑块（twitter bootstrap 3.3.6）。两者都应通过相同的控制元件激活。当通过键盘箭头键激活时（非常快的点击），我失去了同步；尤其是在Firefox（V49.0.1）中。这意味着标题滑块中的图像不属于内容滑块中的文本

我如何才能意识到，只有当两个滑块的动画都完成时，滑块才会被激活

我已经尝试使用jQuery-promise（），但错误保持不变

谢谢你的帮助

$（文档）.ready（函数（）{
$（“#sliderHeader，#sliderPartner”）.carousel({
间隔：假
})
$（“#sliderPartner a.left”）。单击（函数（事件）{
event.stopPropagation（）；
$（“.carousel”）.promise（）.done（函数（）{
$（“#滑动头”）.carousel（'prev'）；
$（'sliderPartner'）.carousel（'prev'）；
});
});
$（'#sliderPartner a.right'）。单击（函数（事件）{
event.stopPropagation（）；
$（“.carousel”）.promise（）.done（函数（）{
$（“#滑动头”）.carousel（'next'）；
$（'sliderPartner'）.carousel（'next'）；
});
});
$（“#sliderPartner.carousel indicators li”）。单击（函数（事件）{
event.stopPropagation（）；
var indicatorNumber=$（this.attr（'data-slide-to'）；
$（“#sliderHeader”）.carousel（parseInt（indicatorNumber））；
$（'sliderPartner'）.carousel（parseInt（indicatorNumber））；
});
$（“正文”）.keyup（函数（e）{
e、 停止传播（）；
如果（e.keyCode==37）{//left
$（'#sliderPartner a.left'）。触发器（'click'）；
}如果（e.keyCode==39）{//right
$（'#sliderPartner a.right'）。触发器（'click'）；
}
});
});

图像0
图1
图2
图3
图4





内容0

内容1

内容2

内容3

内容4

为什么不使用一个全局变量来跟踪您所处的页面

$(() => {
    const MAX_PAGE = 10 // or however many pages
    let pageNum = 0

    goToPage = (newPage) => {
        pageNum = Math.max(0, (Math.min(newPage, MAX_PAGE))
        doPageChange(pageNum)
    }
    next = () => { goToPage(pageNum + 1) }
    prev = () => { goToPage(pageNum - 1) }
})

为什么不使用一个全局变量来跟踪您所处的页面

$(() => {
    const MAX_PAGE = 10 // or however many pages
    let pageNum = 0

    goToPage = (newPage) => {
        pageNum = Math.max(0, (Math.min(newPage, MAX_PAGE))
        doPageChange(pageNum)
    }
    next = () => { goToPage(pageNum + 1) }
    prev = () => { goToPage(pageNum - 1) }
})