You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

开启freeMode后Swiper组件无法居中幻灯片的问题求助

开启freeMode后Swiper组件无法居中幻灯片的问题求助

我最近用Swiper组件的时候碰到个头疼的问题,过来请教下各位大佬!

我的Swiper里有一堆幻灯片,没法在屏幕上一次性全部展示,所以得开启freeMode,这样在移动端滑动松手后,幻灯片能带着惯性继续滚动,体验会更顺畅。

但离谱的是,哪怕我已经在freeMode的配置里加了sticky: true,滑动停止之后,Swiper完全不会把最近的幻灯片对齐到屏幕中心,这和我预想的效果完全不一样。

下面是我当前的代码,麻烦各位帮忙看看哪里出问题了:

<Swiper
        slidesPerView={5}
        centeredSlides={true}
        // onSlideChangeTransitionEnd={onSlideChange}
        modules={[Navigation, Pagination, Scrollbar, A11y]}
        spaceBetween={0}
        navigation
        pagination={{ clickable: true }}
        scrollbar={{ draggable: true }}
        className={styles.swiper}
        touchRatio={1.5}
        longSwipes={true}
        grabCursor={true}
        cssMode={true}
        slideActiveClass={styles.selectedSlide}
        freeMode={{
          enabled: true,
          momentumBounce: true,
          sticky: true,
        }}
      >
        {slides}
      </Swiper>

有没有大佬能指点下,开启freeMode之后,怎么才能让滑动停止时,最近的幻灯片自动居中到屏幕中心呢?

备注:内容来源于stack exchange,提问作者Luca

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.13 20:03:08