Swiper 轮播

用于循环播放一组图片或内容。

代码演示

基础用法

通过swiperList属性设置轮播内容。

<hd-swiper :swiperList="swiperList"></hd-swiper>

const swiperList = ref([
  {
    img: 'https://img.yzcdn.cn/vant/cat.jpeg',
    text: '淮左名都'
  },
  {
    img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3279463813,881319902&fm=26&gp=0.jpg',
    text: '竹西佳处'
  },
  {
    img: 'https://img.yzcdn.cn/vant/cat.jpeg',
    text: '解鞍少驻初程'
  }
])

图片宽高比

通过rate属性控制轮播图片的宽高比，默认为 2。

<hd-swiper :swiperList="swiperList" :rate="2"></hd-swiper>

自动切换

通过autoplay属性控制图片是否自动切换，默认true(自动切换)。

<hd-swiper :swiperList="swiperList" :autoplay="false"></hd-swiper>

图片文字说明

通过showTextTip属性开关轮播图文字说明，默认false(无文字说明)。

<hd-swiper :swiperList="swiperList" :showTextTip="true"></hd-swiper>

容器样式

通过card属性控制容器样式是否为卡片容器，默认false。

<hd-swiper :swiperList="swiperList" :card="true"></hd-swiper>

衔接滑动

通过circular属性控制轮播滚动到最后一张后是否衔接滑动到第一张，默认true。

<hd-swiper :swiperList="swiperList" :circular="false"></hd-swiper>

面板指示点

通过indicatorDots属性控制轮播图下方是否展示滚动指示点，默认true。

<hd-swiper :swiperList="swiperList" :indicatorDots="false"></hd-swiper>

轮播方向

通过vertical控制轮播图滚动方向是否为纵向，默认true。

<hd-swiper :swiperList="swiperList" :vertical="false"></hd-swiper>

Props

Name	Description	Type	Required	Default
swiperList	图片数组	`Array`	`false`	[]
videoAutoplay	是否自动播放视频	`Boolean`	`false`	默认值是：`false`
videoKey	视频映射的键(字段名)	`String`	`false`	默认值：`video`
imageKey	图片映射的键(字段名)	`String`	`false`	默认值：`img`
textKey	文字说明映射的键(字段名)	`String`	`false`	默认值：`text`
showTextTip	是否展示图片文字说明	`Boolean`	`false`	默认值是：`false`
textStyleSize	图片文字大小	`Number`	`false`	默认值是：`24`
textStyleBottom	图片文字底部距离	`Number`	`false`	默认值是：`5`
textStyleRight	图片文字右侧距离	`Number`	`false`	默认值是：`5`
textStyleColor	图片文字颜色	`String`	`false`	默认值是：`#ffffff`
textStyleBgcolor	图片文字背景色	`String`	`false`	默认值是：`transparent`
rate	宽高比推荐 w/h => 2	`Number`	`false`	默认值是：`2`
skipHiddenItemLayout	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 App、微信小程序支持	`Boolean`	`false`	默认值是：`false`
displayMultipleItems	同时显示的滑块数量支付宝钉钉不支持	`Number`	`false`	默认值是：`1`
nextMargin	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 app-nvue、字节跳动小程序、飞书小程序不支持	`String`	`false`	默认值是：`0px`
previousMargin	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 app-nvue、字节跳动小程序、飞书小程序不支持	`String`	`false`	默认值是：`0px`
vertical	滑动方向是否为纵向卡牌不支持纵向以及同时显示的2块以上滑块数量	`Boolean`	`false`	默认值是：`true`
circular	是否采用衔接滑动	`Boolean`	`false`	默认值是：`true`
duration	滑动动画时长	`Number`	`false`	默认值是：`400`
interval	自动切换时间间隔	`Number`	`false`	默认值是：`2500`
current	当前所在滑块的下标	`Number`	`false`	默认值是：`0`
autoplay	是否自动切换	`Boolean`	`false`	默认值是：`true`
indicatorColor	指示点颜色	`String`	`false`	默认值是：`#CCCCCC`
indicatorActiveColor	当前选中的指示点颜色	`String`	`false`	默认值是：`#ffffff`
indicatorDots	是否显示面板指示点	`Boolean`	`false`	默认值是：`true`
card	是否卡片样式	`Boolean`	`false`	默认值是：`false`

Events

Event Name	Description	Parameters
clickItem	滑块被点击时触发	value:Object 滑块值
change	激活滑块变更时触发	value:Object 滑块值
animationfinish	滑块动画结束时触发	value:Object 滑块值

# Swiper 轮播

# 代码演示

# 基础用法

# 图片宽高比

# 自动切换

# 图片文字说明

# 容器样式

# 衔接滑动

# 面板指示点

# 轮播方向

# Props

# Events