Skip to main content
Version: 3.x

Swiper

Swiper view container. Only the swiper-item component can be placed in it. Otherwise, undefined behavior will occur.

Reference

Type

ComponentType<SwiperProps>

Examples

class App extends Component {
render () {
return (
<Swiper
className='test-h'
indicatorColor='#999'
indicatorActiveColor='#333'
vertical
circular
indicatorDots
autoplay>
<SwiperItem>
<View className='demo-text-1'>1</View>
</SwiperItem>
<SwiperItem>
<View className='demo-text-2'>2</View>
</SwiperItem>
<SwiperItem>
<View className='demo-text-3'>3</View>
</SwiperItem>
</Swiper>
)
}
}

SwiperProps

PropertyTypeDefaultRequiredDescription
indicatorDotsbooleanfalseNoSpecifies whether to display the indicator of the panel.
indicatorColorstring"rgba(0, 0, 0, .3)"NoThe color of the indicator.
indicatorActiveColorstring"#000000"NoThe color of the currently selected indicator.
autoplaybooleanfalseNoSpecifies whether to enable auto switching.
currentnumber0NoThe index of the current swiper.
currentItemIdstring""NoThe item-id of the current swiper cannot be specified at the same time as current.
intervalnumber5000NoThe interval of auto switching.
durationnumber500NoDuration of the swiping animation.
circularbooleanfalseNoSpecifies whether to use circular swiping.
verticalbooleanfalseNoSpecifies whether to swipe vertically.
previousMarginstring"0px"NoThe previous margin. It can be used to expose a small section of the previous item. Values in both px and rpx are supported.
nextMarginstring"0px"NoThe next margin. It can be used to expose a small section of the next item. Values in both px and rpx are supported.
displayMultipleItemsnumber1NoThe number of swipers displayed concurrently.
skipHiddenItemLayoutbooleanfalseNoSpecifies whether to skip the swiper block that is not displayed. When it is set to true, the swiping performance in complex cases can be optimized, but the layout information of the hidden swiper block will be discarded.
easingFunction"default" | "linear" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic""default"NoSpecifies the animation easing type for the swiper.
onChangeBaseEventOrigFunction<onChangeEventDeatil>NoA change event triggered when the value of the current component changes.
onTransitionBaseEventOrigFunction<onTransitionEventDetail>NoA transition event triggered when the location of the swiper-item component changes.
onAnimationFinishBaseEventOrigFunction<onChangeEventDeatil>NoAn animationfinish event triggered when an animation ends.

Property Support

PropertyWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
SwiperProps.indicatorDots✔️✔️✔️✔️✔️✔️
SwiperProps.indicatorColor✔️✔️✔️✔️✔️✔️
SwiperProps.indicatorActiveColor✔️✔️✔️✔️✔️✔️
SwiperProps.autoplay✔️✔️✔️✔️✔️✔️
SwiperProps.current✔️✔️✔️✔️✔️✔️
SwiperProps.interval✔️✔️✔️✔️✔️✔️
SwiperProps.duration✔️✔️✔️✔️✔️
SwiperProps.circular✔️✔️✔️✔️✔️✔️
SwiperProps.vertical✔️✔️✔️✔️✔️✔️
SwiperProps.previousMargin✔️✔️
SwiperProps.nextMargin✔️✔️
SwiperProps.displayMultipleItems✔️✔️✔️✔️
SwiperProps.skipHiddenItemLayout✔️✔️
SwiperProps.easingFunction✔️
SwiperProps.onChange✔️✔️✔️✔️✔️✔️
SwiperProps.onTransition✔️
SwiperProps.onAnimationFinish✔️✔️✔️✔️

TChangeSource

Reasons for change.

PropertyDescription
autoplayAutoplay
touchUser paddle
Other reasons

TEasingFunction

Valid values of easing-function

ValueDescription
defaultDefault easing function
linearLinear animation
easeInCubicEase-in animation
easeOutCubicEase-out animation
easeInOutCubicEase-in and ease-out animations

onChangeEventDeatil

ParamTypeDescription
currentnumberThe index of the current swiper.
source"" | "autoplay" | "touch"Reasons for change.

onTransitionEventDetail

ParamTypeDescription
dxnumberX-coordinate
dynumberY-coordinate

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
Swiper✔️✔️✔️✔️✔️✔️

NOTE

  • Do not set the style attribute for SwiperItem, you can set the style via class. 7147