在 mouseenter 上引导轮播循环并在 mouseleave + 间隔上暂停

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>

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