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

Posted 2023-05-08

【中文标题】在 mouseenter 上引导轮播循环并在 mouseleave + 间隔上暂停

【英文标题】：Bootstrap Carousel cycle on mouseenter and pause on mouseleave + interval

【发布时间】：2013-01-12 05:58:47

【问题描述】：

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

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

这段代码几乎可以工作，但只是第一次当鼠标悬停在轮播上时。第二次不工作，不控制间隔。

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

【问题讨论】：

How can I pause a Bootstrap Carousel on hover and resume it on mouse-out?的可能重复

【参考方案1】：

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

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