Swiper plugin (VUe-awesome-swiper) is introduced in vUE +TS project

rendering

Download the dependent

Install

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

/** * In package.json file */
  "dependencies": {
  "core-js": "^ 3.6.5." "."npm-sass": "^ 2.3.0." "."swiper": "^ 5.4.5." "."vue": "^ 2.6.11." "."vue-awesome-swiper": "^ 4.4.1"
  }
Copy the code

NPM install swiper@^’ version ‘

NPM install vue-awesome-swiper@^’ version ‘

Registered to use

Global registration

/** main.js file */
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

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

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

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

Locally incorporated

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

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

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

export default {
components: {
  Swiper,
  SwiperSlide
}
}

Copy the code

Github swiper registration instructions

case

Vue-awes-swiper/example on Github

Case source code

My TS project thumbnail code

<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: The url (" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3576358313, & FM = 26 & gp = 0. 3239146876 JPG "); } &.slide-4 { background-image: The url (" https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1030604573, & FM = 26 & gp = 0. 1579640549 JPG "); } &.slide-5 { background-image: The url (" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1289369004, & FM = 26 & gp = 0. 3384672207 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>Copy the code