如何实现Bootstrap 4 Carousel仅在鼠标悬停时播放？

当然可以实现这个需求！Bootstrap 4的Carousel组件提供了现成的API方法，我们只需要结合鼠标事件调用这些方法就能达成目标。下面是具体的实现步骤：

1. 调整HTML结构 #

首先要确保你的Carousel不要设置data-ride="carousel"属性——这个属性会让轮播在页面加载时自动播放，不符合我们默认静态的要求。另外，轮播项（carousel-item）必须至少有一个带有active类，否则组件无法正常显示内容。这里我帮你完善了PHP生成图片的逻辑，确保第一个轮播项自动加上active类：

<div id="myCarousel" class="carousel carousel-fade">
  <div class="carousel-inner embed-responsive embed-responsive-21by9">
    <?php 
    // 标记第一个轮播项，添加active类
    $is_first_item = true;
    // 假设tuote_kuvat支持回调函数来渲染每个图片项
    tuote_kuvat( '_tuote_img', 'full', function($image_html) use (&$is_first_item) {
        $active_class = $is_first_item ? ' active' : '';
        echo "<div class='carousel-item{$active_class}'>{$image_html}</div>";
        $is_first_item = false;
    });
    ?>
  </div>
  <!-- 完善左右控制按钮的完整结构 -->
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

2. 添加JavaScript逻辑 #

我们需要监听Carousel容器的mouseenter和mouseleave事件，分别调用组件的cycle（开始循环播放）和pause（暂停播放）方法。同时初始化时设置interval: false，让轮播默认保持静态：

$(document).ready(function() {
  // 初始化轮播组件，默认禁用自动播放
  const myCarousel = $('#myCarousel').carousel({
    interval: false // 设为false表示默认不自动轮播
  });

  // 鼠标移入时启动轮播循环
  myCarousel.on('mouseenter', function() {
    // 可以在这里自定义轮播间隔，比如3秒切换一次：{interval: 3000}
    $(this).carousel('cycle');
  });

  // 鼠标移出时暂停轮播
  myCarousel.on('mouseleave', function() {
    $(this).carousel('pause');
  });
});

关键细节说明 #

• 依赖检查：确保你的页面已经正确引入了jQuery和Bootstrap 4的JavaScript文件，Carousel组件依赖这两个库才能正常工作；
• 自定义轮播间隔：如果需要调整图片切换的速度，在调用cycle方法前可以重新设置间隔，比如$(this).carousel({interval: 2000}).carousel('cycle')，这里的2000表示2秒切换一次；
• 静态默认状态：初始化时设置interval: false是核心，它会让Carousel默认停留在第一个active的图片上，不会自动切换。

内容的提问来源于stack exchange，提问作者Iisakki Ronkainen