#<Swiper>

#基本用法

常见分页内容优先使用 normal mode。明确设置 item 尺寸和容器尺寸，再用 onChange 将当前索引同步到指示器或页面状态。

#循环

当首尾项目需要衔接时使用 loop mode。它适合推荐位、活动卡片或其他循环浏览内容，避免滑到边界时出现硬停顿。

#弹性反弹

bounce 内容适合用于边界反馈或拉动加载。正常浏览时应保持隐藏，只在用户拖过边界时展示轻量状态。

#Custom

当 slide 需要持续响应滑动进度时，使用 custom mode。把进度值映射到 translate、scale 和 rotate 等 transform，就可以构建卡片堆叠交互。

你可以查看进阶用法 了解更多

#SwiperProps

#RenderFunctionProps

#BounceConfig

#onBounceParams

#SwipeToOptions

#SwiperRef

#Advanced Usage

Use the advanced APIs when the default slide layout is not enough. customAnimation lets each item respond to swipe progress, while mode decides whether Swiper places items for you or leaves placement to your animation function.

#Understanding customAnimation

type customAnimation = (value: number, index: number) => CSSProperties

customAnimation is a main thread function. While Swiper is scrolling, each SwiperItem receives its distance from the active item and returns the style it should use for that frame.

The function parameter value represents the distance of this <SwiperItem> relative to the selected <SwiperItem>.

In this example, when <Swiper>'s progress is 2:

• <SwiperItem>-2 receives a value of 0
• <SwiperItem>-1 receives a value of -1
• <SwiperItem>-3 receives a value of 1

Furthermore, when <Swiper>'s progress is updated to 3:

• <SwiperItem>-2 receives a value of -1
• <SwiperItem>-1 receives a value of -2
• <SwiperItem>-3 receives a value of 0

Use this value as a stable input for interpolation. For example, 0 is the active item, -1 is the previous item, and 1 is the next item.

#Practice with customAnimation

This pattern is useful when Swiper should keep its normal layout but the items need visual treatment such as scale, opacity, or rotation.

#Understanding mode

<Swiper> supports two mode options: normal and custom. Their differences are as follows:

mode='normal'

• <SwiperItem>s are arranged sequentially in the direction

• Provides center alignment, right alignment, and other capabilities through modeConfig mode='custom'

• The position of <SwiperItem> needs to be specified through customAnimation

• Offers higher customization capabilities

To summarize:

• normal mode handles the position of <SwiperItem>s, making it more suitable for horizontal sliding scenarios and easier to use
• custom mode requires manual position calculation but offers higher extensibility

#Practice with customAnimation when mode='custom'

Use custom mode when item placement itself is part of the design. In this mode, the animation function should return both position and visual style.