Swiper.js时间轴同步问题求助：滑动日期错位、轮播不同步

核心修改方案 #

要实现两个Swiper组件的完全同步，需从双向控制器绑定、参数统一、交互限制三个维度调整，以下是修正后的关键代码：

// 初始化顶部时间轴Swiper
const timelineSwiper = new Swiper('.timeline-swiper', {
  slidesPerView: 'auto',
  spaceBetween: 10,
  speed: 300, // 和内容Swiper保持一致的动画速度
  freeMode: true,
  touchRatio: 1, // 确保触摸拖动灵敏度完全匹配
  preventInteractionOnTransition: true, // 过渡时禁止交互，避免中途操作导致错位
});

// 初始化下方内容Swiper
const contentSwiper = new Swiper('.content-swiper', {
  slidesPerView: 1,
  spaceBetween: 0,
  speed: 300, // 统一动画速度
  preventInteractionOnTransition: true,
  controller: {
    control: timelineSwiper, // 绑定控制时间轴Swiper
  },
});

// 反向绑定，让时间轴拖动时同步内容Swiper
timelineSwiper.controller.control = contentSwiper;

关键调整说明 #

• 双向控制器绑定：仅单向绑定会导致拖动时间轴时内容不同步，必须让两个Swiper互相控制，确保任意一方的滑动操作都能同步触发另一方。
• 统一核心参数：
  • speed：设置相同的动画速度，彻底解决一方滑动更快的问题。
  • touchRatio：保持默认值1，确保触摸拖动的距离与Swiper滑动距离完全对应。
  • preventInteractionOnTransition：过渡动画期间禁止用户再次触发交互，避免中途操作打断同步流程。
• 修正日期错位：确保时间轴Swiper的slidesPerView: 'auto'能正确识别每个日期滑块的宽度，需在DOM完全加载后再初始化Swiper，避免动态宽度计算错误。

额外视觉同步优化 #

通过slideChange事件给激活的日期滑块添加样式，强化视觉同步反馈：

contentSwiper.on('slideChange', function() {
  timelineSwiper.slides.removeClass('active');
  timelineSwiper.slides.eq(this.activeIndex).addClass('active');
});

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