zebra-swiper

# 轮播块

# 数量

通过设置slidesPerView即可设置轮播的显示数量。

<z-swiper v-model="list" :options="{slidesPerView : 2}">
	<z-swiper-item v-for="(item,index) in list" :key="index">
		<image class="image" :src="item" mode="aspectFill">
		</image>
	</z-swiper-item>
</z-swiper>

# 居中

通过设置centeredSlides为true即可使轮播居中。

<z-swiper v-model="list" :options="{slidesPerView : 2,centeredSlides : true}">
	<z-swiper-item v-for="(item,index) in list" :key="index">
		<image class="image" :src="item" mode="aspectFill">
		</image>
	</z-swiper-item>
</z-swiper>

# 贴合边缘

通过设置centeredSlidesBounds为true即可使轮播贴合边缘。

<z-swiper v-model="list" :options="{slidesPerView : 3,centeredSlides : true,centeredSlidesBounds: true}">
	<z-swiper-item v-for="(item,index) in list" :key="index">
		<image class="image" :src="item" mode="aspectFill">
		</image>
	</z-swiper-item>
</z-swiper>

# 分组

通过设置slidesPerGroup即可设置分组数量。

<z-swiper v-model="list" :options="{slidesPerView : 3, slidesPerGroup : 3}">
	<z-swiper-item v-for="(item,index) in list" :key="index">
		<image class="image" :src="item" mode="aspectFill">
		</image>
	</z-swiper-item>
</z-swiper>

# 距离

通过设置spaceBetween即可设置每个slide之间的距离。

<z-swiper v-model="list" :options="{slidesPerView : 3,spaceBetween : 20}">
	<z-swiper-item v-for="(item,index) in list" :key="index">
		<image class="image" :src="item" mode="aspectFill">
		</image>
	</z-swiper-item>
</z-swiper>

← 循环 →