Vue2 中使用Swiper构建中间大两边小轮播效果

Swiper是一个功能丰富的“滑动特效”插件：
常用的tab切换，banner切换等等，包含各种切换特效，看Demo就非常炫酷。同时，也提供了主流的框架组件版本。然而，最新版的Vue组件只支持在Vue3中使用。查找资料后实践，记录一个Vue2中的使用方式。
Swiper的官网介绍也比较清楚，英文官网中是最新的版本的内容，没有找到旧版的文档内容，中文官网可以看到旧版的文档。

一、Swiper 在Vue2 中的使用方法

最新的Swiper只支持Vue3，所以在 Vue2上要安装旧版本

第一步：npm 安装正确的版本

npm i [email protected] [email protected]

第二步：在对应的Vue页面中引用库

这里其实是使用vue-awesome-swiper库对swiper的封装

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

// 添加组件
components: {
    Swiper,
    SwiperSlide,
},

第三步：在页面上使用组件，并对组件添加设置，swiperOption属性设置见后文

    Slide 1
    Slide 2
    Slide 3
    Slide 4
    Slide 5
    Slide 6
    Slide 7

二、Swiper 相关参数和事件(options的配置)

相关参数和事件参考中文网站中旧版api。该文档是Swiper 4.X - 7.X 的api ，但是这里是[email protected]版本，大部分api是通用的，7上只是略有区别，看文档时注意区分即可。

注意：

该组件事件的监听有一些坑，通过监听点击某个slider事件进行说明。

监听事件可以直接写在组件的标签中，如, 这样在test方法中就可以收到点击回调。然而，当我们想获取点击某个slide时，却发现在该方法中无法获取到swiper对象，进而无法使用swiper对象的activeIndex属性获取到当前点击的slide位置。

若要想获取该swiper实例，则需要将监听配置到on参数中：

swiperOption: {
    on: {
        // 该方法中的this都指代swiper本身
        tap: function () {
            console.log('点击的位置', this.activeIndex);
        }
    }
}

注意这里也不能写成箭头函数，会更改this的指向。

三、简单的例子：中间大两边小的轮播

效果如图：

初始加载

可设置loop属性让初始加载即两边都有slide，详见下方代码loop属性注释

滚动后

完整代码如下，主要是配置相关的样式，具体参数含义注释在代码中了：

参考文章：
如何正确的使用 vue-awesome-swiper 轮播组件
swiper中间大两边小的轮播图
swiper写中间大两边小的轮播图
使用swiper做的轮播图--多种效果
Vue中使用Swiper
vue 使用swiper的时候报 [Vue warn]: Failed to mount component: template or render function not d