vue 轮播图

npm i vue-awesome-swiper@3 -S

<template>
  <div class="thumb-example">
    <!-- swiper1 -->
    <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
      <swiper-slide class="slide-1">
        <div class="table-cell-container">
          <img src="https://dimg04.c-ctrip.com/images/0206c120009m35bnwAC1B_R_600_400_R5_D.jpg" 
            alt="">
        </div>
      </swiper-slide>
      <swiper-slide class="slide-2">
        <div class="table-cell-container">
          <img src="https://dimg04.c-ctrip.com/images/0205h120008m1dfqmD3EB_W_1080_808_R5_D.jpg"  alt="">
        </div>
      </swiper-slide>
      <swiper-slide class="slide-3">
        <div class="table-cell-container">
          <img src="https://dimg04.c-ctrip.com/images/0204a12000a9vntarDF44_W_1080_808_R5_D.jpg"  alt="">
        </div>
      </swiper-slide>
      <swiper-slide class="slide-4">
        <div class="table-cell-container">
          <img src="https://bhw.lllomh.com/images/04.jpg"  alt="">
        </div>
      </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">
        <div class="table-cell-thumbs"><img
            src="https://dimg04.c-ctrip.com/images/0206c120009m35bnwAC1B_R_600_400_R5_D.jpg" 
            alt=""></div>
      </swiper-slide>
      <swiper-slide class="slide-2">
        <div class="table-cell-thumbs"><img
            src="https://dimg04.c-ctrip.com/images/0205h120008m1dfqmD3EB_W_1080_808_R5_D.jpg" 
            alt=""></div>
      </swiper-slide>
      <swiper-slide class="slide-3">
        <div class="table-cell-thumbs"><img
            src="https://dimg04.c-ctrip.com/images/0204a12000a9vntarDF44_W_1080_808_R5_D.jpg" 
            alt=""></div>
      </swiper-slide>
      <swiper-slide class="slide-4">
        <div class="table-cell-thumbs"><img src="https://bhw.lllomh.com/images/04.jpg"  alt="">
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  name: 'swiper-example-thumbs-gallery',
  title: 'Thumbs gallery with Two-way control',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      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: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper
      const swiperThumbs = this.$refs.swiperThumbs.swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
  }
}
</script>

<style lang="scss" scoped>
.table-cell-thumbs{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  /* 根据需要设置宽度和高度 */
  width: 200px;
  height: 150px;
  /* 仅用于可视化边界 */
}
.table-cell-thumbs img {
  /* 如果你需要限制图片大小，可以在这里设置 */
  max-width: 100%;
  max-height: 100%;
}
.table-cell-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  /* 根据需要设置宽度和高度 */
  width: 800px;
  height: 600px;
  /* 仅用于可视化边界 */
}

.table-cell-container img {
  /* 如果你需要限制图片大小，可以在这里设置 */
  max-width: 100%;
  max-height: 100%;
}

.thumb-example {
  height: 1000px;
}

.swiper {
  .swiper-slide {
    background-size: cover;
    background-position: center;
  }

  &.gallery-top {
    height: 600px;
    width: 800px;
  }

  &.gallery-thumbs {
    height: 150px;
    box-sizing: border-box;
    padding: 0;
    margin-top: 20px;
    width: 800px;
  }

  &.gallery-thumbs .swiper-slide {
    width: 200px;
    height: 150px;
    opacity: 0.4;
  }

  &.gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }
}
</style>

```html
在这里插入代码片