zebra-swiper中内置的组件包括：
z-swiper 核心组件
swiper的主容器
z-swiper-item 核心组件
swiper的子容器，通常每个item代表一个轮播块。与z-swiper搭配使用。
<z-swiper grabCursor>
<z-swiper-item v-for="item in list" :key="item.id">
<view class="swiper-item"> {{item.text}} </view>
</z-swiper-item>
</z-swiper>z-swiper-shadow
为3D轮播提供阴影效果。开发者不需要关注此组件。
z-swiper-native
函数式组件（该组件仅支持web平台，如果你的项目只需兼容h5，推荐使用此组件）
z-swiper-item-native
函数式组件的子容器，与z-swiper-native搭配使用。
<z-swiper-native grabCursor>
<z-swiper-item-native v-for="item in list" :key="item.id">
<DemoItem :text="item.text"></DemoItem>
</z-swiper-item-native>
</z-swiper-native>z-navigation
swiper内置的切换器组件，开发者无需关注。
<z-swiper grabCursor navigation :modules="modules">
<z-swiper-item v-for="item in list" :key="item.id">
<DemoItem :text="item.text"></DemoItem>
</z-swiper-item>
</z-swiper><script setup>
import { ref } from 'vue'
import { Navigation } from '@zebra-ui/swiper/modules'
const list = ref(
Array.from({
length: 5
}).map((item, index) => {
return {
text: `Slide ${index + 1}`,
id: index + 1
}
})
)
const modules = ref([Navigation])
</script><style lang="scss">
@use "@zebra-ui/swiper/modules/navigation/navigation.scss";
</style>z-pagination
swiper内置的分页器组件，开发者无需关注。
<z-swiper grabCursor pagination :modules="modules">
<z-swiper-item v-for="item in list" :key="item.id">
<DemoItem :text="item.text"></DemoItem>
</z-swiper-item>
</z-swiper><script setup>
import { ref } from 'vue'
import { Pagination } from '@zebra-ui/swiper/modules'
const list = ref(
Array.from({
length: 5
}).map((item, index) => {
return {
text: `Slide ${index + 1}`,
id: index + 1
}
})
)
const modules = ref([Pagination])
</script><style lang="scss">
@use "@zebra-ui/swiper/modules/pagination/pagination.scss";
</style>z-scrollbar
swiper内置的滚动条组件，开发者无需关注。
<z-swiper grabCursor scrollbar :modules="modules">
<z-swiper-item v-for="item in list" :key="item.id">
<DemoItem :text="item.text"></DemoItem>
</z-swiper-item>
</z-swiper><script setup>
import { ref } from 'vue'
import { Scrollbar } from '@zebra-ui/swiper/modules'
const list = ref(
Array.from({
length: 5
}).map((item, index) => {
return {
text: `Slide ${index + 1}`,
id: index + 1
}
})
)
const modules = ref([Scrollbar])
</script><style lang="scss">
@use "@zebra-ui/swiper/modules/scrollbar/scrollbar.scss";
</style>