如何通过键盘Tab进入SwiperJS滑块时暂停自动播放？

要实现键盘导航进入滑块内元素时暂停轮播，不需要监听Tab键，直接利用focusin和focusout事件结合:focus-within的特性更可靠——毕竟用户可能用Shift+Tab等其他键盘方式切换焦点。

问题分析 #

你之前的Tab键监听方案存在两个核心问题：

• Tab键触发keyup时，焦点可能还未完全落入滑块容器，导致.carousel-wrapper:focus-within检测失效
• 直接设置swiper.autoplay = false不符合Swiper API规范，必须使用官方提供的方法控制自动播放

正确实现代码 #

jQuery版本

// 滑块容器内任意元素获得焦点时，暂停轮播
$('.carousel-wrapper').on('focusin', function() {
  swiper.autoplay.pause();
});

// 滑块容器失去所有内部焦点时，恢复轮播
$('.carousel-wrapper').on('focusout', function() {
  // 延迟判断，避免焦点在滑块内部元素间切换时误触发恢复
  setTimeout(() => {
    if (!$('.carousel-wrapper:focus-within').length) {
      swiper.autoplay.resume();
    }
  }, 100);
});

原生JS版本

const carouselWrapper = document.querySelector('.carousel-wrapper');

carouselWrapper.addEventListener('focusin', () => {
  swiper.autoplay.pause();
});

carouselWrapper.addEventListener('focusout', () => {
  setTimeout(() => {
    if (!carouselWrapper.matches(':focus-within')) {
      swiper.autoplay.resume();
    }
  }, 100);
});

关键说明 #

• focusin事件：当容器内任意元素获得焦点时触发（覆盖Tab、键盘导航等所有焦点进入场景）
• focusout事件：添加setTimeout是为了避免焦点在滑块内部元素间切换时，误触发轮播恢复
• 严格遵循Swiper API：始终用swiper.autoplay.pause()暂停、swiper.autoplay.resume()恢复，不要直接修改autoplay属性

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