鼠标中心的Bootstrap Carousel循环和mouseleave + interval的暂停

Question

我想让Bootstrap Carousel只循环on:hover并在鼠标离开后暂停。我正在使用默认的Bootstrap代码库。页面上将有多个具有此功能的轮播。

如果可能的话，我还想控制间隔速度。 data-interval属性似乎不起作用。

这段代码几乎可以工作，但只是第一次鼠标悬停在旋转木马上。它第二次不起作用，不控制间隔。

<script>
  $(document).ready(function(){
    $('.carousel').mouseenter(function() {
        $(this).carousel('cycle');
    }).mouseleave(function() {
        $(this).carousel('pause');
    });
  });
</script>

Answer 1

<script>
$(document).ready(function(){
  $(`.carousel`).on(`mouseenter`,function() {
  $(this).carousel('cycle');
  }).on(`mouseleave`, function() {
  $(this).carousel('pause');
  });
});
</script>

以防万一其他人正在寻找此解决方案。