vue "vue-awesome-swiper": "^4.1.1" 的使用

<!-- swiper1 -->
            <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
                <swiper-slide v-for="item in img_list" :key="item.id" class="slide-1">
                  <img :src="item.imageURL" alt="" style="width:100%">
                </swiper-slide>
                <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
                <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
            </swiper>
            <!-- swiper2 Thumbs -->
            <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
                <swiper-slide v-for="item in img_list" :key="item.id" class="slide-1">
                  <img :src="item.imageURL" alt="" style="width:100%">
                </swiper-slide>
            </swiper>

<script> 
//使用swiper
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'index',
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      img_list:[
        {id:1,imageURL:"https://cdn.uviewui.com/uview/album/1.jpg"},
        {id:2,imageURL:"https://cdn.uviewui.com/uview/album/1.jpg"},
        {id:3,imageURL:"https://cdn.uviewui.com/uview/album/1.jpg"},
        {id:4,imageURL:"https://cdn.uviewui.com/uview/album/1.jpg"}
      ],//图片
       swiperOptionTop: {
            loop: true,
            loopedSlides: 5, // looped slides should be the same
            spaceBetween: 10,
            // 左右两边的点击事件
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            }
        },
        swiperOptionThumbs: {
            loop: true, // 是否可循环
            loopedSlides: 5, // looped slides should be the same
            spaceBetween: 10, // 缩略图之间的间隙大小
            centeredSlides: true, // 大图对应的缩略图位置显示在中间
            slidesPerView: 5, // 每一页显示下方缩略图的数量，auto ：自动显示所有数量；输入number（如1、2、3等）则是手动定义显示的数量
            touchRatio: 0.2, // 触控比例，可理解为拖动缩略图的距离，默认值为1
            slideToClickedSlide: true //点击其他缩略图可跳转
        }
    }
  },

.swiper {
    margin-bottom: 10px;
    .swiper-slide {
        // background-size: cover;
        background-position: center;
    }

    &.gallery-top {
        height: 80%;
        width: 100%;
    }
    &.gallery-thumbs {
        height: 20%;
        width: 100%;
        box-sizing: border-box;
        padding: gap 0;
    }
    &.gallery-thumbs .swiper-slide { //等比例缩小
        opacity: 0.4;
        height: 68px;
        width: 68px;
        border: 1px solid #eee;
        background-size: contain;
    }
    &.gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }
}