Swiper 轮播

基于 swiper.js实现，默认集成了 autoplay/navigation/pagination 模块。

基础使用

可以通过 <gov-swiper /> 和 <gov-swiper-slide /> 组件快速创建。

查看代码

vue

<template>
	<demo-container class="gov-demo-swiper">
		<gov-swiper>
			<gov-swiper-slide>Slide 1</gov-swiper-slide>
			<gov-swiper-slide>Slide 2</gov-swiper-slide>
			<gov-swiper-slide>Slide 3</gov-swiper-slide>
			<gov-swiper-slide>Slide 4</gov-swiper-slide>
			<gov-swiper-slide>Slide 5</gov-swiper-slide>
		</gov-swiper>
	</demo-container>
</template>

<style lang="scss">
@use "./style.scss";
</style>

设置左右切换的交互按钮。

查看代码

vue

<template>
	<demo-container class="gov-demo-swiper">
		<gov-swiper navigation>
			<gov-swiper-slide>Slide 1</gov-swiper-slide>
			<gov-swiper-slide>Slide 2</gov-swiper-slide>
			<gov-swiper-slide>Slide 3</gov-swiper-slide>
			<gov-swiper-slide>Slide 4</gov-swiper-slide>
			<gov-swiper-slide>Slide 5</gov-swiper-slide>
		</gov-swiper>
	</demo-container>
</template>

<style lang="scss">
@use "./style.scss";
</style>

导航分栏 pagination

设置常见的底部分页。

查看代码

vue

<template>
	<demo-container class="gov-demo-swiper">
		<gov-swiper pagination>
			<gov-swiper-slide>Slide 1</gov-swiper-slide>
			<gov-swiper-slide>Slide 2</gov-swiper-slide>
			<gov-swiper-slide>Slide 3</gov-swiper-slide>
			<gov-swiper-slide>Slide 4</gov-swiper-slide>
			<gov-swiper-slide>Slide 5</gov-swiper-slide>
		</gov-swiper>
	</demo-container>
</template>

<style lang="scss">
@use "./style.scss";
</style>

自动播放 autoplay

是否自动播放。

查看代码

vue

<template>
	<demo-container class="gov-demo-swiper">
		<gov-swiper pagination autoplay>
			<gov-swiper-slide>Slide 1</gov-swiper-slide>
			<gov-swiper-slide>Slide 2</gov-swiper-slide>
			<gov-swiper-slide>Slide 3</gov-swiper-slide>
			<gov-swiper-slide>Slide 4</gov-swiper-slide>
			<gov-swiper-slide>Slide 5</gov-swiper-slide>
		</gov-swiper>
	</demo-container>
</template>

<style lang="scss">
@use "./style.scss";
</style>

是否循环 loop

当展示到最后一页的时候，是否循环衔接。

查看代码

vue

<template>
	<demo-container class="gov-demo-swiper">
		<gov-swiper navigation autoplay loop>
			<gov-swiper-slide>Slide 1</gov-swiper-slide>
			<gov-swiper-slide>Slide 2</gov-swiper-slide>
			<gov-swiper-slide>Slide 3</gov-swiper-slide>
			<gov-swiper-slide>Slide 4</gov-swiper-slide>
			<gov-swiper-slide>Slide 5</gov-swiper-slide>
		</gov-swiper>
	</demo-container>
</template>

<style lang="scss">
@use "./style.scss";
</style>

垂直方向 direction

设置 direction 为 vertical，可改为垂直方向。

查看代码

vue

<template>
	<demo-container class="gov-demo-swiper">
		<gov-swiper pagination autoplay loop direction="vertical">
			<gov-swiper-slide>Slide 1</gov-swiper-slide>
			<gov-swiper-slide>Slide 2</gov-swiper-slide>
			<gov-swiper-slide>Slide 3</gov-swiper-slide>
			<gov-swiper-slide>Slide 4</gov-swiper-slide>
			<gov-swiper-slide>Slide 5</gov-swiper-slide>
		</gov-swiper>
	</demo-container>
</template>

<style lang="scss">
@use "./style.scss";
</style>

多列 slides-per-view

设置 slides-per-view 可展示多列效果。

查看代码

vue

<template>
	<demo-container class="gov-demo-swiper">
		<gov-swiper navigation :slides-per-view="2">
			<gov-swiper-slide>Slide 1</gov-swiper-slide>
			<gov-swiper-slide>Slide 2</gov-swiper-slide>
			<gov-swiper-slide>Slide 3</gov-swiper-slide>
			<gov-swiper-slide>Slide 4</gov-swiper-slide>
			<gov-swiper-slide>Slide 5</gov-swiper-slide>
			<gov-swiper-slide>Slide 6</gov-swiper-slide>
		</gov-swiper>
	</demo-container>
</template>

<style lang="scss">
@use "./style.scss";
</style>

间距 space-between

space-between 可设置两个页之间的间距。

查看代码

vue

<template>
	<demo-container class="gov-demo-swiper">
		<gov-swiper navigation :slides-per-view="2" space-between="50">
			<gov-swiper-slide>Slide 1</gov-swiper-slide>
			<gov-swiper-slide>Slide 2</gov-swiper-slide>
			<gov-swiper-slide>Slide 3</gov-swiper-slide>
			<gov-swiper-slide>Slide 4</gov-swiper-slide>
			<gov-swiper-slide>Slide 5</gov-swiper-slide>
			<gov-swiper-slide>Slide 6</gov-swiper-slide>
		</gov-swiper>
	</demo-container>
</template>

<style lang="scss">
@use "./style.scss";
</style>

Swiper Attributes

更多配置参考 Swiper Vue.js Components

属性	类型	默认值	说明
tag	string	div	主容器的 HTML 标签。
wrapperTag	string	div	滑块包装器的 HTML 标签。
slidesPerView	Number	1	每次滑动显示的滑块数量。
spaceBetween	Number	0	滑块之间的间距。
centeredSlides	Boolean	false	是否将滑块居中对齐。
loop	Boolean	false	是否启用循环模式。
speed	Number	300	动画速度（毫秒）。
effect	String	slide	切换效果。可选择slide/fade/cube/coverflow
autoplay	Boolean/Object	false	是否启用自动播放，或传递一个对象来配置自动播放： delay: 自动切换的时间间隔（毫秒） stopOnLastSlide: 是否在最后一个滑块时停止自动播放 disableOnInteraction: 用户交互后是否停止自动播放
navigation	Boolean/Object	false	是否启用导航按钮，或传递一个对象来配置导航按钮： nextEl: 下一个按钮的元素选择器 prevEl: 上一个按钮的元素选择器 hideOnClick: 是否在点击后隐藏导航按钮
pagination	Boolean/Object	false	是否启用分页器，或传递一个对象来配置分页器： el: 分页器的元素选择器 clickable: 分页器是否可点击 renderBullet: 自定义分页器渲染函数

Swiper events

更多配置参考 Swiper Vue.js Components

事件名	参数	描述
@swiper	swiper	当 Swiper 初始化或更新时触发，返回 Swiper 实例。
@slideChange	currentIndex, previousIndex	当滑块变化时触发，返回当前滑块和前一个滑块的索引。
@reachEnd	-	当 Swiper 滑动到最后一个滑块时触发。
@reachStart	-	当 Swiper 滑动到第一个滑块时触发。
@autoplayStart	-	当自动播放开始时触发。
@autoplayStop	-	当自动播放停止时触发。
@navigationNext	-	当点击下一个按钮时触发。
@navigationPrev	-	当点击上一个按钮时触发。
@paginationClick	index	当点击分页器时触发，返回点击的分页器索引。

Swiper slots

<gov-swiper>
  <gov-swiper-slide>Slide 1</gov-swiper-slide>
  <gov-swiper-slide>Slide 2</gov-swiper-slide>
  <template v-slot:container-start><span>Container start</span></template>
  <template v-slot:container-end><span>Container end</span></template>
  <template v-slot:wrapper-start><span>Wrapper start</span></template>
  <template v-slot:wrapper-end><span>Wrapper end</span></template>
</gov-swiper>

插槽名称	说明
container-start	元素将被添加到 Swiper 容器的开始位置。
container-end	元素将被添加到 Swiper 容器的结束位置。
wrapper-start	元素将被添加到 Swiper 滑块包装器的开始位置。
wrapper-end	元素将被添加到 Swiper 滑块包装器的结束位置。

SwiperSlide Attributes

更多配置参考 Swiper Vue.js Components

属性	类型	默认值	说明
tag	string	div	滑块的 HTML 标签。

SwiperSlide Slot Props

<SwiperSlide /> 的默认插槽参数，可用于做高亮效果。

<gov-swiper>
  <gov-swiper-slide v-slot="{ isActive }">
    <div>Current slide is {{ isActive ? 'active' : 'not active' }}</div>
  </gov-swiper-slide>
</gov-swiper>

Slot Prop	类型	描述
isActive	Boolean	当前滑块是否处于活跃状态。可用于改变活跃状态下滑块的样式或内容。
isPrev	Boolean	当前滑块是否是前一个活跃滑块。可用于区分当前活跃滑块的前一个滑块。
isNext	Boolean	当前滑块是否是后一个活跃滑块。可用于区分当前活跃滑块的后一个滑块。
isVisible	Boolean	当前滑块是否可见。只有在启用了 `watchSlidesProgress` 参数时有效。
isDuplicate	Boolean	当前滑块是否是复制的滑块。在循环模式下，Swiper 会复制滑块以实现无缝循环。

Swiper 轮播 ​

基础使用 ​

左右切换 navigation ​

导航分栏 pagination ​

自动播放 autoplay ​

是否循环 loop ​

垂直方向 direction ​

多列 slides-per-view ​

间距 space-between ​

Swiper Attributes ​

Swiper events ​

Swiper slots ​

SwiperSlide Attributes ​

SwiperSlide Slot Props ​

Swiper 轮播

基础使用

左右切换 navigation

导航分栏 pagination

自动播放 autoplay

是否循环 loop

垂直方向 direction

多列 slides-per-view

间距 space-between

Swiper Attributes

Swiper events

Swiper slots

SwiperSlide Attributes

SwiperSlide Slot Props