基于vue2使用vue-awesome-swiper 轮播图（踩坑记录）

---

提示：
本文介绍是基于vue2.0实现，如果您是vue3.0建议直接去swiper上按照官方文档使用哦。
Swiper官方地址：https://www.swiper.com.cn/

---

一、vue-awesome-swiper的介绍

首先，Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，以及PC端网站。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

而vue-awesome-swiper则是一个大佬封装的关于Swiper的插件，能够帮助我们在vue的框架下更好地去使用Swiper实现轮播图的各种效果

二、实现效果

三、实现步骤（坑多！）

为了省略时间，不介绍有哪些坑了，直接说明如何使用。

1.安装Swiper

// 版本问题！！大坑！vue中使用 swiper 需要使用  swiper 以及  vue-awesome-swipe 
// 这两个的版本不能随意更改，有对应关系，我们只是为了实现效果，所以直接安装特定版本
npm install swiper@5.4.1 vue-awesome-swiper@4.1.1 --save

2.注册swiper组件

这里使用局部注册的方法，实际应用可根据需求自行选择全局注册或局部注册

直接贴上我自定义的组件代码（根据官方文档更改的）：

// 组件使用说明：
// 1、作用：含有缩略图和主图的组件
// 2、传入参数：这里为了看效果，暂时没写props传参，有不理解的可以搜索关于自定义组件中props的用法
<template>
    <div class="thumb-example">
        <!-- swiper1 -->
        <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
            <swiper-slide class="slide-1"></swiper-slide>
            <swiper-slide class="slide-2"></swiper-slide>
            <swiper-slide class="slide-3"></swiper-slide>
            <swiper-slide class="slide-4"></swiper-slide>
            <swiper-slide class="slide-5">