vue-awesome-swiper的踩坑记录

效果图：

文档地址

需要用到swiper的缩略图至少是4的版本

1. 安装

npm install vue-awesome-swiper@4 -S
npm install swiper@4 -S

2. 局部使用

<template>
    <div>
        <swiper ref="mySwiper" class="mySwiper" :options="swiper">
          <swiper-slide
            v-for="item in banner" :key="item.id">
            <div class="item">
              <div class="item-img">
                <img :src="item.img" width="100%" height="100%">
                <p class="title">{{item.title}}</p>
              </div>
            </div>
          </swiper-slide>
          // slot不可少
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        // 缩略图
        <swiper ref="mySwiperThumbs" class="mySwiperThumbs container " :options="swiperThumbs">
          <swiper-slide :key="item.id"
            v-for="item in banner">
            <div class="item">
              <img :src="item.img" width="100%" height="100%">
              <p class="title f14">{{item.title}}</p>
            </div>
          </swiper-slide>
          // slot不可少
          <div class="swiper-button-prev" slot="button-prev">
            <i class="el-icon-arrow-left"></i>
          </div>
          <div class="swiper-button-next" slot="button-next">
            <i class="el-icon-arrow-right"></i>
          </div>
        </swiper>
    </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// Swiper, SwiperSlide首字母要大写不然会报找不到组件的错误
export default {
    components: {
      Swiper, SwiperSlide
    },
    data() {
        return{
            swiper: {
              loop: true,
              loopedSlides: 5,
              pagination: {
                el: '.swiper-pagination',
                clickable: true
              }
            },
            swiperThumbs: {
              loop: true,
              loopedSlides: 5, // looped slides should be the same
              spaceBetween: 20,
              centeredSlides: true,
              slidesPerView: 6, // 显示几个缩略图
              touchRatio: 0.2,
              slideToClickedSlide: true,
              pagination: {
                preEl: '.swiper-button-prev',
                nextEl: '.swiper-button-next'
              }
            },
        }
    }
}
</script>