如何关闭模态框后保持Swiper滑块的位置不变

问题描述 #

将Swiper滑块（版本8.0.6，设置slidesPerView: 3）与模态框结合使用时，关闭第二或第三个滑块对应的模态框后，滑块会自动回到第一个滑块的位置，尝试以下代码未解决问题：

$('.modal .btn-close').on('click', function() { 
  var activeIndex = swiper.activeIndex; 
  swiper.slideTo(activeIndex, 0, false); 
});

解决方案 #

问题根源在于模态框关闭时机与Swiper容器状态不匹配：关闭按钮点击时模态框尚未完全关闭，Swiper容器处于隐藏状态，slideTo操作无法生效。需通过监听模态框的生命周期事件，在正确时机保存和恢复滑块位置：

1. 确保Swiper实例全局可访问：

// 全局声明Swiper实例
let swiper = new Swiper('.swiper', {
  slidesPerView: 3,
  // 你的其他配置项
});

2. 监听模态框的关闭事件，保存并恢复滑块位置：

let savedSlideIndex = 0;

// 模态框开始关闭时，保存当前活动滑块索引
$('.modal').on('hide.bs.modal', function() {
  savedSlideIndex = swiper.activeIndex;
});

// 模态框完全关闭后，恢复滑块位置
$('.modal').on('hidden.bs.modal', function() {
  // 0代表无动画，false代表不触发transition事件
  swiper.slideTo(savedSlideIndex, 0, false);
});

关键说明 #

• 使用hide.bs.modal事件（模态框开始关闭时）保存索引，确保获取的是关闭前的正确位置
• 使用hidden.bs.modal事件（模态框完全关闭、容器重新显示后）执行恢复操作，此时Swiper容器已处于可见状态，slideTo能正常生效
• 覆盖所有模态框关闭场景（包括点击背景、ESC键关闭），而非仅监听关闭按钮

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