Swiper拖拽时如何精准识别即将居中的幻灯片并触发回调？

问题背景 #

我在实现带拖拽功能的时间线组件时，无法准确获取拖拽过程中即将居中（释放后会对齐到中心）的幻灯片索引。目前通过幻灯片宽度结合swiper.progress手动计算的方式，在幻灯片尺寸不一致时误差很大，导致高亮状态错误。

解决方案 #

无需手动计算，利用Swiper内置API即可精准获取目标幻灯片索引，核心思路如下：

• 启用Swiper的snap配置，让组件自动管理拖拽对齐点
• 在拖拽过程中，通过swiper.snapGrid（预计算的居中位移数组）和swiper.translate（当前位移值）实时匹配目标索引
• 结合onSlideChangeTransitionStart事件兜底，确保过渡开始时索引准确

修改后的完整代码 #

import React, { useState, useRef } from 'react';
import { Swiper, SwiperClass, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
import './TimelineStepper.css';
import { Autoplay } from 'swiper/modules';
import { SwiperOptions } from 'swiper/types';

interface Timestamp {
  label: string;
}

interface TimelineStepperProps {
  onTimelineChange: (index: number, label: string) => void;
}

const generateTimestamps = (): Timestamp[] => {
  const timestamps: Timestamp[] = [];
  for (let i = 0; i < 24; i++) {
    const label = `${i.toString().padStart(2, '0')}:00`;
    timestamps.push({ label });
  }
  return timestamps;
};

const TimelineStepper: React.FC<TimelineStepperProps> = ({ onTimelineChange }) => {
  const [currentSlide, setCurrentSlide] = useState<number>(12);
  const [autoplay, setAutoplay] = useState<boolean>(false);
  const timestamps = generateTimestamps();
  const swiperRef = useRef<SwiperClass | null>(null);
  const swiperContainerRef = useRef<HTMLDivElement | null>(null);

  const handleSlideClick = (index: number) => {
    setCurrentSlide(index);
    onTimelineChange(index, timestamps[index].label);
  };

  const handleSlideChange = (swiper: SwiperClass) => {
    setCurrentSlide(swiper.realIndex);
    onTimelineChange(swiper.realIndex, timestamps[swiper.realIndex].label);
  };

  const toggleAutoplay = () => {
    setAutoplay(!autoplay);
  };

  const handleSliderMove = (swiper: SwiperClass) => {
    const { snapGrid, translate, slides } = swiper;
    if (!snapGrid.length) return;

    const currentTranslate = Math.abs(translate);
    let targetIndex = 0;

    // 匹配当前位移对应的最近snap点
    for (let i = 0; i < snapGrid.length; i++) {
      if (currentTranslate <= snapGrid[i] + slides[i].offsetWidth / 2) {
        targetIndex = i;
        break;
      }
    }
    // 处理最后一个幻灯片的边界情况
    if (currentTranslate >= snapGrid[snapGrid.length - 1]) {
      targetIndex = snapGrid.length - 1;
    }

    setCurrentSlide(targetIndex);
    onTimelineChange(targetIndex, timestamps[targetIndex]?.label);
  };

  const swiperParams: SwiperOptions = {
    slidesPerView: 'auto',
    spaceBetween: 0,
    centeredSlides: true,
    loop: false,
    navigation: false,
    slideToClickedSlide: true,
    autoplay: {
      delay: 500,
      disableOnInteraction: false,
    },
    modules: [Autoplay],
    // 启用snap配置，自动计算居中对齐点
    snap: true,
    snapAlign: 'center',
  };

  if (swiperRef.current) {
    autoplay ? swiperRef.current.autoplay.start() : swiperRef.current.autoplay.stop();
  }

  return (
    <div ref={swiperContainerRef} className='swiper-main-wrapper'>
      <Swiper
        {...swiperParams}
        onSwiper={(swiper) => { swiperRef.current = swiper; }}
        onSlideChange={(swiper) => handleSlideChange(swiper)}
        onTouchStart={() => setAutoplay(false)}
        onSliderMove={(swiper) => handleSliderMove(swiper)}
        onSlideChangeTransitionStart={(swiper) => {
          // 过渡开始时确认索引，确保准确性
          setCurrentSlide(swiper.activeIndex);
          onTimelineChange(swiper.activeIndex, timestamps[swiper.activeIndex]?.label);
        }}
      >
        {timestamps.map((timestamp, index) => (
          <SwiperSlide key={index} onClick={() => handleSlideClick(index)} className={index > 5 ? 'wide-div' : ''}>
            <div>
              <p className='text-label'>{timestamp.label}</p>
              <div className={`container timeline-button ${index === currentSlide ? 'active' : ''} ${index < currentSlide ? 'past' : ''} ${index > currentSlide ? 'upcoming' : ''}`}>
                <div className={`left-line ${index < currentSlide ? 'past-line' : ''}`}></div>
                <div className={`divider ${index < currentSlide ? 'past-divider' : ''}`}></div>
                <div className={`right-line ${index < currentSlide ? 'past-line' : ''}`}></div>
              </div>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
      <div className='control-cont'>
        <div className="line"></div>
        <button type="button" onClick={toggleAutoplay}>
          {autoplay ? 'Pause' : 'Play'}
        </button>
      </div>
    </div>
  );
};

export default TimelineStepper;

方案说明 #

1. snap配置：启用后Swiper会自动计算每个幻灯片居中时的位移值，存储在snapGrid数组中，彻底避免手动计算宽度的误差
2. 实时拖拽判断：onSliderMove事件中通过当前位移匹配最近的snap点，精准获取拖拽过程中即将居中的幻灯片索引
3. 过渡事件兜底：onSlideChangeTransitionStart在幻灯片开始过渡到新位置时触发，确保索引的最终准确性

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