Skip to main content
Version: 3.x

SwiperItem

It can be placed only in the swiper component, with the width and height each automatically set to 100%.

Reference

Type

ComponentType<SwiperItemProps>

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>
)
}
}

SwiperItemProps

PropertyTypeRequiredDescription
itemIdstringNoThe identifier of the swiper-item

Property Support

PropertyWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
SwiperItemProps.itemId✔️✔️✔️✔️✔️✔️

API Support

APIWeChat Mini-ProgramH5React Native
SwiperItem✔️

Note

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