一个通用轮播图组件

轮播图插件，显示3个或5个，循环切换，具有3d样式效果，支持自动播放设置时间间隔，支持click事件和change事件

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.6.0 app-vue app-nvue	√	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序
√	√	√	√

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	×	×	×	×	×

kevy-swiper

介绍

轮播图插件，最多只显示3个，其余在循环切换时显示，具有3d切换效果，支持自动播放和设置时间间隔，切换后返回当前下标，默认监听左右滑动进行切换，想要上下滑动的话可以在插件里上下滑动的事件里写自己的逻辑。

软件架构

uniapp框架插件，欢迎下载使用。

方法和属性

名称	类型	描述
list	Array	swiper图片URL的list
listDesc	Array	每个图片的说明文字列表，与list顺序一致，不传则不显示说明文字（即仅图片）
showNum	Number	显示图片个数，仅支持3或5，默认3，若list的长度小于5会被强制设为3
width	Number	swiper的宽度，单位rpx，默认100%
height	Number	swiper的高度，单位rpx，默认690rpx
click	Func	点击当前item事件，返回当前item对应下标
change	Func	切换后change事件，返回当前中间位置item对应下标
autoPlay	Boolean	是否自动播放，true自动播放，默认为false
autoPlayInterval	Number	自动播放时间间隔，autoPlay为true时生效，单位毫秒

 使用说明

<template>
    <view class="t-content">
        <kevy-swiper v-if="list && list.length>0" @click="swClick" @change="swChange" :autoPlay="true" :autoPlayInterval="5000" :list="list" :listDesc="listDesc" :height="500" :showNum="3" />
    </view>
</template>

<script>
    import kevySwiper from '@/components/kevy-swiper/kevy-swiper'
    export default {
        components: {
            kevySwiper
        },
        data() {
            return {
                //图片url列表
                list: [],
                //每个图片的说明文字列表，与list顺序一致，不传则不显示说明文字（即仅图片）
                listDesc:[],
            }
        },
        (){
            //请求数据
            //这里模拟请求到了这个list
            let list = ['https://www.changan.com.cn/uploads/chan_newsthumb/330513479a6459781f00398815b9906a.jpg',
                'https://www.changan.com.cn/uploads/chan_newsthumb/e1b488d041b576ba6ce1cc20a6cb81a3.jpg',
                'https://www.changan.com.cn/uploads/chan_newsthumb/40e7cb2bf37e1123b5e4547b094192c3.jpg', 
                'https://www.changan.com.cn/uploads/chan_newsthumb/f60d441c589563b0ece918853194f6e9.jpg',
                'https://www.changan.com.cn/uploads/chan_newsthumb/cd4353d0d1322c6f085b1bb0ecf2c835.jpg',
                'https://www.changan.com.cn/uploads/chan_newsthumb/cd4353d0d1322c6f085b1bb0ecf2c835.jpg'
            ];
            //下面是图片说明列表，需要和上面list下标对应
            let listDesc = ['我是第一个图片的说明文字','我是第二个图片的说明文字，我有点长省略号出现','我是第三个图片的说明文字','我是第四个图片的说明文字','我是第五个图片的说明文字','我是第六个图片的说明文字'];
            this.list = list;
            this.listDesc = listDesc;
        },
        methods: {
            //当点击图片时返回图片下标，用于跳转之类业务
            swClick(idx) {
                console.log("当前点击的图片下标为："+idx)
            },
            //当切换后返回当前下标
            swChange(idx){
                console.log("当前中间图片的下标为："+idx)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .t-content {
        background-color: #f7f7f7;
        min-height: 100vh;
    }
</style>