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

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

一、Swiper 在Vue2 中的使用方法
最新的Swiper只支持Vue3，所以在 Vue2上要安装旧版本

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

npm i swiper@6.8.4 vue-awesome-swiper@4.1.1

第二步：在对应的Vue页面中引用库
这里其实是使用vue-awesome-swiper库对swiper的封装

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

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

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

<swiper :options="swiperOption">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
</swiper>

二、Swiper 相关参数和事件(options的配置)
相关参数和事件参考中文网站中旧版api。该文档是Swiper 4.X - 7.X 的api ，但是这里是swiper@6.8.4版本，大部分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属性注释

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

<template>
    <div>
        <div class="swiper">
            <swiper :options="swiperOption">
                <swiper-slide>Slide 1</swiper-slide>
                <swiper-slide>Slide 2</swiper-slide>
                <swiper-slide>Slide 3</swiper-slide>
                <swiper-slide>Slide 4</swiper-slide>
                <swiper-slide>Slide 5</swiper-slide>
                <swiper-slide>Slide 6</swiper-slide>
                <swiper-slide>Slide 7</swiper-slide>
            </swiper>
        </div>
    </div>

</template>

<script>

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

export default {
   

    name: 'Main',
    components: {
   
        Swiper,
        SwiperSlide,
    },
    data() {
   
        return {
   
            swiperOption: {
   
                spaceBetween: 30,
                slidesPerView: 5, // 一屏显示的slide个数
                centeredSlides: true,// 居中的slide是否标记为active，默认是最左active,这样样式即可生效
                slideToClickedSlide: true,// 点击的slide会居中
                // loop: true,// 循环播放, 可有无限滚动效果，初始加载即是滚动后的效果
                on: {
   
                    // 该方法中的this都指代swiper本身
                    tap: function () {
   
                        console.log('点击的位置', this.activeIndex);
                    }
                }
            },
        }
    },
    mounted() {
   

    },
    methods: {
   
        test(e) {
   
            // 默认会$event对象
            console.log(11,e);
        }
    },
}
</script>

<style lang="less" scoped>
.swiper {
   
    width: 100%;
    height: 50px;
    bottom: 10px;
    position: absolute;
    background-color: darkred;
}

.swiper-container {
   
    width: 100%;
    height: 100%;
}

.swiper-slide {
   
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    transform: scale(0.5);
}

.swiper-slide-active,
.swiper-slide-duplicate-active {
   
    background-color: aqua;
    transform: scale(1);
}
</style>