如何让React项目中SwiperJs垂直模式实现从下到上滑动？

问题描述 #

在React项目中使用SwiperJs实现数字递增效果，希望滑块从下到上滚动，但当前滑动方向相反。已知水平模式下有rtl属性可反转滑动方向，请问垂直模式是否有类似属性或其他实现方法？当前Swiper配置代码如下：

<Swiper
    loop={true}
    slidesPerView={13}
    className="mySwiper"
    centeredSlides={true}
    allowTouchMove={false}
    direction={'vertical'}
    modules={[Autoplay]}
    speed={5000}
    autoplay={{
        delay: 0,
        disableOnInteraction: false,
    }}
>

解决方案 #

1. 启用自动播放反向模式（最直接）

Swiper的autoplay配置提供了reverse参数，设置为true即可直接反转垂直自动滚动的方向，无需调整其他结构：

<Swiper
    loop={true}
    slidesPerView={13}
    className="mySwiper"
    centeredSlides={true}
    allowTouchMove={false}
    direction={'vertical'}
    modules={[Autoplay]}
    speed={5000}
    autoplay={{
        delay: 0,
        disableOnInteraction: false,
        reverse: true // 新增该属性
    }}
>
    {/* 你的Slide内容 */}
</Swiper>

2. 反转Slide渲染顺序

如果不想修改自动播放配置，可以将需要渲染的数字数组倒序排列。例如原本渲染[1,2,3,...,100]，改为渲染[100,...,3,2,1]，这样Swiper默认从上往下滚动时，视觉上呈现数字从下往上递增的效果。

3. CSS翻转容器（兼容旧版Swiper）

若使用的Swiper版本不支持autoplay.reverse，可通过CSS翻转容器和Slide内容来实现反向滚动：

.mySwiper {
    transform: rotate(180deg);
}
.mySwiper .swiper-slide {
    transform: rotate(180deg);
}

该方法通过翻转整个Swiper容器实现反向滚动，再将每个Slide翻转回来保证内容方向正确。

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