vue實現(xiàn)帶縮略圖的輪播圖效果

更新時間：2024年02月01日 10:01:36 作者：lllomh

這篇文章主要為大家詳細介紹了如何使用vue實現(xiàn)帶縮略圖的輪播圖效果,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的可以參考下

1.引入swiper和vue-awesome-swiper插件

npm install swiper@4 --save
npm install vue-awesome-swiper@3 --save

2.在main.js中引入：

import VueAwesomeSwiper from 'vue-awesome-swiper'
 Vue.use(VueAwesomeSwiper)
 import '../node_modules/swiper/dist/css/swiper.css'

3.使用：

template:布局

<template>
  <div>
    <div class="thumb-example">
      <!-- swiper1 -->
      <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
      >
        <swiper-slide class="slide-1" v-for="item in bigImg" :key="item.id">
          <img :src="item.url" style="height:570px;width:100%" alt="" />
        </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"
                style="width:100px;height:100px;"
                v-for="item in bigImg"
                :key="item.id"
        >
          <img style="width:100px;height:100px;" :src="item.url" alt="" />
        </swiper-slide>
        <div class="swiper-button-next swiper-button-white" slot="button-next">
          <div>
            <img src="../assets/ArtIcon-offs.svg" alt="" />
          </div>
        </div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev">
          <div>
            <img src="../assets/ArtIcon-offs.svg" alt="" />
          </div>
        </div>
      </swiper>
    </div>
  </div>
</template>
 
<script>
export default {
  mounted() {
    // 實現(xiàn)swiper雙向控制
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper
      const swiperThumbs = this.$refs.swiperThumbs.swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
  },
  data() {
    return {
      //輪播大圖配置
      bigImg: [
        {
          url: 'https://bhw.lllomh.com/images/02.jpg',
          id: 0
        },
        {
          url: 'https://bhw.lllomh.com/images/01.jpg',
          id: 1
        },
        {
          url: 'https://bhw.lllomh.com/images/03.jpg',
          id: 2
        },
        {
          url: 'https://bhw.lllomh.com/images/04.jpg',
          id: 3
        }
      ],
      swiperOptionTop: {
        zoom: true,
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        observer: true, //修改swiper自己或子元素時，自動初始化swiper
        observeParents: true, //修改swiper的父元素時，自動初始化swiper
        // autoplay: {  //自動輪播
        //   delay: 2000,
        //   disableOnInteraction: false
        // },
        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,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
 
  methods: {}
}
</script>

4.scss or sass

<style lang="scss" scoped>
h3 {
  margin: 20px 0 0 10px;
}
.thumb-example {
  width: 864px;
  margin-top: 20px;
  // background: #000;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
}
.gallery-top {
  // height: 80% !important;
  height: 600px;
  width: 100%;
}
.gallery-thumbs {
  height: 20% !important;
  box-sizing: border-box;
  padding: 10px 0px;
  width: 864px;
  margin-left: 2px;
  .swiper-button-next {
    right: 0px;
  }
  .swiper-button-prev {
    left: 0px;
  }
  .swiper-button-next,
  .swiper-button-prev {
    background: #fff;
    width: 45px;
    text-align: center;
    height: 101px;
    top: 26%;
    div {
      margin-top: 30px;
      background: rgb(207, 205, 205);
      height: 45px;
      border-radius: 50%;
      img {
        margin: 7px 0 0 2px;
        width: 30px;
      }
    }
  }
  .swiper-button-next:hover div {
    background: rgb(189, 186, 186);
  }
  .swiper-button-prev:hover div {
    background: rgb(189, 186, 186);
  }
}
.gallery-thumbs .swiper-slide {
  width: 20%;
  height: 80px;
  // opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
  border: 2px solid red;
}
</style>

這樣就可以了

效果: