【vue+Swiper】vue中使用swiper缩略图，展示一张大图及n张小图，点击小图切换不同的大图展示，完整代码

最新推荐文章于 2025-05-31 20:13:02 发布

原创最新推荐文章于 2025-05-31 20:13:02 发布 · 2.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Swiper库创建带有缩略图的轮播图组件，包括安装步骤、HTML结构、API应用以及如何通过JavaScript实现主图与缩略图的联动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：
在这里插入图片描述
这是在swiper官网上找的示例，swiper太强大了，有非常多不同的示例,有api，有教程，还可以下载示例代码。

但是第一次使用，研究这个缩略图的实现还是花了几个小时，好在实现了。

swiper官网请戳这里

安装

 npm i swiper

将swiper封装成组件可以复用，在components公共组件文件夹中新增swiper文件夹，新增index.vue
在这里插入图片描述选择API文档，Thumbs（缩略图），可以查看缩略图的使用示例
ps：这里要补充下，示例其实挺清楚的，但是因为没有对应的html参考，所以我在这里多花了一点时间。swiper缩略图的实现其实是new Swiper了两个swiper实例，然后通过给主图所在的swiper实例的thumbs对象配置缩略图所在的swiper进行关联。
在这里插入图片描述

如果想看完整的示例代码，需要下载它的示例，我下载的是第一个
在这里插入图片描述

注意点：

1、加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件
在public文件夹的index.html中引入

  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> 
 <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

2、添加HTML内容。Swiper7的默认容器是’.swiper’，Swiper6之前是’.swiper-container’，我这里是’swiper‘，可以再加类名，但是默认类名一定是’swiper‘。
3、初始化Swiper var swiper = new Swiper(“#mySwiper”, {}）
4、主图与缩略图关联，将点击缩略图的activeIndex传给主图的slideTo方法中

完整代码：
componeents/swiper/index

<template>
  <div class="container-box">
    <!-- 主图 -->
    <div class="swiper mySwiper2" id="mySwiper2">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          ref="mySwiper2"
          v-for="(item, index) in imgArr"
          :key="item.id"
        >
          <img :src="item.imgSrc" alt="" />
        </div>
      </div>
    </div>
    <!-- 缩略图 -->
    <div class="swiper mySwiper" id="mySwiper" ref="mySwiper">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(item, index) in imgArr"
          :key="item.id"
        >
          <img :src="item.imgSrc" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css";

export default {
  name: "SwiperDemo",
  props: {
    imgArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      //缩略图
      var swiper = new Swiper("#mySwiper", {
        spaceBetween: 10,
        slidesPerView: 4,
        watchSlidesProgress: true,
        on: {
          click: () => {
            // 缩略图实例
            let swiperThumbs = swiper;
            // 主图实例
            let swiperTop = swiper2;
            let activeIndex = swiperThumbs.clickedIndex;
            swiperTop.slideTo(activeIndex, 1000, false);
    
          },
        },
      });
      //   主图
      var swiper2 = new Swiper("#mySwiper2", {
        spaceBetween: 10,
        thumbs: {
          swiper: swiper,
        },
        slideThumbActiveClass: "my-slide-thumb-active",
        multipleActiveThumbs: true,
      });
    },
  },
};
</script>

<style lang="scss">
.container-box {
  height: 584px;
  width: 584px;
}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper {
  width: 100%;
  height: 143px;
  margin-left: auto;
  margin-right: auto;
}

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

.mySwiper2 {
  height: 80%;
  width: 100%;
}

.mySwiper {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.mySwiper .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}

.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

在页面中使用

//将图片数组传进去就行
<swiper :imgArr="imgArr"></swiper>

import swiper from "@/components/swiper";
 components: { swiper },