更新记录

1.0.8（2024-04-08）

增加竖向切换按钮，可根据自己需要放置轮播图左边或者右边，swiperType="swiperB"堆叠效果不支持

1.0.7（2024-04-07）

新增左右切换按钮，轮播图样式swiperB不支持

1.0.6（2024-04-02）

修改报警 bug

平台兼容性

轮播图 zt-swiper

基本用法

• 轮播图提供 swiperType 四种类型：swiperType="swiperA"、swiperType="swiperB"、swiperType="swiperC"、swiperType="swiperD"
• 指示点提供 controlPointOut 六种类型：controlPointOut="pointOutA"、controlPointOut="pointOutB"、controlPointOut="pointOutC"、controlPointOut="pointOutD"、controlPointOut="pointOutE"，当 pointOutNum 设置最大数字时，轮播图数组长度>=最大数字时，就会以数字形式显示指示点。通过 pointOutIsShow 设置 false 或 true，控制指示点是否显示。

温馨提示

• 轮播中穿插视频，无需特别标记，会自行识别图片或者视频。

API

Props

事件 Events

注意事项

<zt-swiper :height="100">
    当 height 设置为 100 时，首先 要给加一个带有固定高度值的 class 或者 style 例如：<zt-swiper class="className" style="height: 500rpx"></zt-swiper>
</zt-swiper>

演示代码

<zt-swiper
swiperType="swiperA" 
itemKey="url" 
:videoImg="videoImg" 
:bannerList="listData" 
:width="720" 
:height="1280"
backGround="#fff" 
borderRadius="15rpx" 
:interval="5000" 
:duration="500" 
:circular="true" 
:vertical="false" 
modeImg="widthFix" 
:pointOutIsShow="true" 
controlPointOut="pointOutB" 
pointOutJustifyContent="center" 
pointOutColor="#2997cf" 
pointOutDefaultColor="#fff" 
:pointOutBottom="50" 
:pointOutNum="9" 
:isUpAndDown="true" 
upDownType="a"
@change="changeFun"
@click="clickFun">
    <view style="position: absolute;left: 0;right:0;">
        支持插槽，轮播样式swiperB,z-index层级比较高，如果用插槽最少设置 10000
    </view>
</zt-swiper>

预览

功能预览