Vue3使用触摸滑动插件（Swiper）

Vue2使用触摸滑动插件（Swiper）

参考文档：

• Swiper官方

• Swiper Vue

• Swiper Demos

本文使用的是最新版本：[email protected]

安装插件：yarn add swiper

本文基于Swiper插件进行封装，主要实现两种形式的轮播图展示：

• 首页轮播图切换展示（type: banner）

• 走马灯轮播图滚动展示（type: carousel）

可自定义设置以下属性：

• 轮播图片数组（images），类型：Array<{title: string, link?: string, src: string}>，默认 []

• 图片宽度（width），类型：number | string，默认 '100%'

• 图片高度（height），类型：number | string，默认 '100vh'

• banner轮播图模式 | carousel走马灯模式（type），类型：string，默认 'banner'

• 是否显示导航（navigation），类型：boolean，默认 true

• 自动切换的时间间隔（type: banner时生效）（delay），单位ms，类型：number，默认 3000

• 是否可以鼠标拖动（swipe），类型：boolean，默认 true

• 预加载时的loading颜色（preloaderColor），类型：string，默认 'theme'，可选 theme(主题色) | white | black

效果如下图：

首页轮播图 type: banner

走马灯 type: carousel 

①创建触摸滑动组件Swiper.vue：

②在要使用的页面引入：