使用Swiper JS实现垂直分页时，分页按钮顺序错位（从第5项开始）

问题现象 #

使用Swiper JS实现垂直分页时，分页按钮的起始项与幻灯片列表不匹配，默认从第5项开始显示，而非第1项。

核心原因 #

启用freeMode: true后，Swiper不会强制将幻灯片对齐到容器顶部，若页面初始滚动位置或Swiper内部布局偏移，会导致分页指示器与当前显示幻灯片错位。

具体修复方案 #

方案1：关闭自由滚动模式（非必需场景） #

如果不需要自由滑动（滑动后无需停在任意位置），直接禁用freeMode：

<Swiper
  height={window.innerHeight}
  width={window.innerWidth}
  direction='vertical'
  freeMode={false} // 关闭自由滚动
  pagination={{
    clickable: true,
    type: "bullets"
  }}
  modules={[Pagination, Mousewheel]}
  className="mySwiper"
>
  <SwiperSlide>Slide cek one</SwiperSlide>
  <SwiperSlide>Slide cek two </SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
  <SwiperSlide>Slide 5</SwiperSlide>
  <SwiperSlide>Slide 6</SwiperSlide>
  <SwiperSlide>Slide 7</SwiperSlide>
  <SwiperSlide>Slide 8</SwiperSlide>
  <SwiperSlide>Slide 9</SwiperSlide>
</Swiper>

方案2：保留自由滚动并强制初始定位 #

若必须使用自由滚动，添加initialSlide: 0强制初始显示第1张幻灯片，同时开启freeModeSticky让滑动后自动对齐到最近幻灯片：

<Swiper
  height={window.innerHeight}
  width={window.innerWidth}
  direction='vertical'
  freeMode={true}
  freeModeSticky={true} // 开启粘性对齐
  initialSlide={0} // 强制初始显示第1张
  pagination={{
    clickable: true,
    type: "bullets"
  }}
  modules={[Pagination, FreeMode, Mousewheel]}
  className="mySwiper"
>
  <SwiperSlide>Slide cek one</SwiperSlide>
  <SwiperSlide>Slide cek two </SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
  <SwiperSlide>Slide 5</SwiperSlide>
  <SwiperSlide>Slide 6</SwiperSlide>
  <SwiperSlide>Slide 7</SwiperSlide>
  <SwiperSlide>Slide 8</SwiperSlide>
  <SwiperSlide>Slide 9</SwiperSlide>
</Swiper>

方案3：修正页面初始滚动位置 #

检查是否有CSS或页面逻辑导致初始滚动偏移，可在组件挂载时强制滚动到页面顶部：

import { useEffect } from 'react';
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import "./styles.css";
import { FreeMode, Mousewheel, Pagination } from "swiper";

export default function App() {
  useEffect(() => {
    window.scrollTo(0, 0); // 强制页面初始滚动到顶部
  }, []);

  return (
    <>
      <Swiper
        height={window.innerHeight}
        width={window.innerWidth}
        direction='vertical'
        freeMode={true}
        pagination={{
          clickable: true,
          type: "bullets"
        }}
        modules={[Pagination, FreeMode, Mousewheel]}
        className="mySwiper"
      >
        <SwiperSlide>Slide cek one</SwiperSlide>
        <SwiperSlide>Slide cek two </SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>
    </>
  );
}

额外注意事项 #

• 确保swiper/css和swiper/css/pagination样式完整引入，缺失样式可能导致分页指示器渲染异常
• 避免给Swiper容器添加自定义overflow或position属性，防止干扰内部布局逻辑

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