Swiper视频轮播loop属性未生效问题求助

问题分析 #

核心问题有两点：

• 进度条动画时长（2秒）与Swiper自动切换延迟（5秒）不匹配，导致进度条走完后无法同步触发切换
• 第一个视频自带loop属性独立循环播放，干扰Swiper整体轮播逻辑；同时未正确导入Autoplay模块，导致自动切换与Loop功能异常

解决方案 #

1. 统一进度条动画与自动切换时长 #

修改CSS中进度条动画的时长，让它和Swiper的autoplay.delay保持一致：

.swiper-pagination-bullet-active::before {
  background-color: red;
  /* 动画时长改为与autoplay.delay一致的5秒 */
  -webkit-animation: slide-progress 5s cubic-bezier(0.3, 0, 0.3, 1) forwards;
          animation: slide-progress 5s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}

2. 标准化视频配置，移除独立Loop #

去掉第一个视频的loop属性，所有视频统一添加muted（浏览器自动播放强制要求）、autoPlay和playsInline（避免移动端全屏播放）：

<SwiperSlide>
  <video width="900" height="800" autoPlay muted playsInline>
    <source src={ship} type='video/mp4'/>
  </video>
</SwiperSlide>
<SwiperSlide>
  <video src={highway} width="900" height="800" autoPlay muted playsInline/>
</SwiperSlide>

3. 完善Swiper配置，同步视频与轮播逻辑 #

导入Autoplay模块，添加Swiper实例控制，实现切换时视频自动播放/暂停：

import { useRef, useEffect } from 'react';
import { Pagination, A11y, Autoplay, type Swiper as SwiperRef } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

import ship from '../assets/videos/ship.mp4'
import highway from '../assets/videos/pexels-kelly-lacy-5473765.mp4'

import 'swiper/css';
import 'swiper/css/pagination';

const NewHome = () => {
  const swiperRef = useRef<SwiperRef>(null);

  // 切换slide时控制视频播放状态
  const syncVideoPlayback = () => {
    // 暂停所有视频
    document.querySelectorAll('video').forEach(video => video.pause());
    // 播放当前激活slide的视频
    const activeVideo = document.querySelector('.swiper-slide-active video');
    if (activeVideo) activeVideo.play();
  };

  useEffect(() => {
    const swiper = swiperRef.current;
    if (swiper) {
      // 初始化时播放首个视频
      syncVideoPlayback();
      // 监听slide切换事件
      swiper.on('slideChange', syncVideoPlayback);
      return () => swiper.off('slideChange', syncVideoPlayback);
    }
  }, []);

  return (
   <Swiper
        ref={swiperRef}
        modules={[Pagination, A11y, Autoplay]}
        autoplay={{ 
          delay: 5000, 
          disableOnInteraction: false, // 交互后保持自动播放
          waitForTransition: true // 等待过渡完成再启动下一轮计时
        }}
        pagination={{ clickable: true }}
        loop
        className="w-1/2"
      >
        <SwiperSlide>
          <video width="900" height="800" autoPlay muted playsInline>
            <source src={ship} type='video/mp4'/>
          </video>
        </SwiperSlide>
        <SwiperSlide>
          <video src={highway} width="900" height="800" autoPlay muted playsInline/>
        </SwiperSlide>
    </Swiper>
  )
}

export default NewHome

最终效果 #

调整后，进度条动画与自动切换完全同步，每个幻灯片进度条走完后自动切换，视频在对应slide激活时自动播放、离开时暂停，整个轮播可循环往复运行。

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