实现单个Swiper滑块在父容器hover时独立自动播放

问题原因 #

原代码在遍历每个.swiper时，给所有.container绑定了鼠标事件，导致hover任意一个容器时，所有滑块的自动播放都会被触发。同时，事件绑定逻辑没有关联到当前滑块对应的父容器，无法实现独立控制。

修正方案 #

需要为每个滑块对应的专属父容器绑定事件，确保hover操作只影响当前容器内的滑块，以下两种方式均可实现：

方式一：遍历滑块时绑定对应父容器事件

$(document).ready(function() {
    let swiperCMSglobalSetting = {
        speed: 400,
        spaceBetween: 100,
        autoplay: false,
        disableOnInteraction: false,
        effect: "fade",
        pagination: false,
        navigation: false,
        loop:true,
    }
    $(".swiper").each(function(index, element){
      var $this = $(this);
      // 获取当前滑块对应的父容器
      var $parentContainer = $this.closest(".container");
      var swiper = new Swiper(this, swiperCMSglobalSetting);
      
      // 仅给当前滑块的父容器绑定事件
      $parentContainer.mouseenter(function () {
          swiper.autoplay.start();
      });
      $parentContainer.mouseleave(function () {
          swiper.autoplay.stop();
      });
    });
});

方式二：遍历父容器初始化滑块并绑定事件

这种方式逻辑更清晰，直接以父容器为单位处理：

$(document).ready(function() {
    let swiperCMSglobalSetting = {
        speed: 400,
        spaceBetween: 100,
        autoplay: false,
        disableOnInteraction: false,
        effect: "fade",
        pagination: false,
        navigation: false,
        loop:true,
    }
    $(".container").each(function(){
      var $container = $(this);
      // 初始化当前容器内的滑块
      var swiper = new Swiper($container.find(".swiper"), swiperCMSglobalSetting);
      
      // 给当前容器绑定鼠标事件
      $container.mouseenter(function () {
          swiper.autoplay.start();
      });
      $container.mouseleave(function () {
          swiper.autoplay.stop();
      });
    });
});

原理说明 #

• 使用closest(".container")精准定位当前滑块的父容器，避免操作所有容器；
• 每个容器和其内部的滑块实例一一绑定，确保hover事件只触发对应滑块的自动播放控制；
• 两种方式都能实现独立控制，可根据代码结构选择合适的方案。

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