vue+TS项目中引入swiper插件 （vue-awesome-swiper） 缩略图

效果图

下载依赖

Install

npm install swiper@^5 vue-awesome-swiper --save

这个是下载swiper@5版本,vue-awesome-swiper自动下载最新的

/**
下载后package.json文件中
*/
  "dependencies": {
  "core-js": "^3.6.5",
  "npm-sass": "^2.3.0",
  "swiper": "^5.4.5",
  "vue": "^2.6.11",
  "vue-awesome-swiper": "^4.1.1"
  }

不同的swiper版本下载方式 npm install swiper@^'版本号'

不同的vue-awesome-swiper版本下载方式 npm install vue-awesome-swiper@^'版本号'

注册使用

全局注册

下载的swiper版本不同对应引入的.css文件也不相同 看清自己下载的版本号

/**
main.js文件中    
*/
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x) swiper6的css
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)swiper5的css
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

  }

本地注册

/**
main.js文件中    
*/
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

// import style (>= Swiper 6.x) swiper6的css
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x) swiper5的css
import 'swiper/css/swiper.css'

export default {
components: {
  Swiper,
  SwiperSlide
}
}

Github上swiper注册说明

案例

Github上vue-awesome-swiper/案例

官方缩略图

案例源代码

我的TS项目缩略图代码

<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"></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 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"></swiper-slide>
</swiper>
</div>
</template>

<script lang="ts">
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import { Component, Vue} from "vue-property-decorator";
import $ from "jquery";

    @Component({
      components: {
        Swiper,
        SwiperSlide,
      },
    })
export default class extends Vue {
    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, 
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true
    }
    
mounted() {
  this.$nextTick(() => {
  const swiperTop = (<any>this.$refs.swiperTop).$swiper;
  const swiperThumbs = (<any>this.$refs.swiperThumbs).$swiper;
  swiperTop.controller.control = swiperThumbs;
  swiperThumbs.controller.control = swiperTop;
});
}
}
</script>

<style lang="scss" scoped>
.thumb-example{
height: 500px;
}
.swiper-container {
background-color: #000;
}
.swiper-slide {
background-size: cover;
background-position: center;
&.slide-1 {
background-image: url("http://www.sidmedical.cn/UploadFiles/20164271385991.jpg");
}
&.slide-2 {
background-image: url("http://www.sidmedical.cn/UploadFiles/201642893211680.jpg");
}
&.slide-3 {
background-image: url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3576358313,3239146876&fm=26&gp=0.jpg");
}
&.slide-4 {
background-image: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1030604573,1579640549&fm=26&gp=0.jpg");
}
&.slide-5 {
background-image: url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1289369004,3384672207&fm=26&gp=0.jpg");
}
}
.gallery-top {
height: 80% !important;
width: 100%;
}
.gallery-thumbs {
height: 20% !important;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
opacity: 1;
}
</style>