Vue框架使用swiper5实现带缩略图的轮播图

直接上代码，复制可用

<template>
  <div class="count_box">
    <div class="title_box">{{ carouselData[activeIndex].title }}</div>
    <div class="banner_box">
      <div class="thumbnail-carousel">
        <div class="swiper-container main-carousel">
          <div class="swiper-wrapper">
            <div v-for="(item, index) in carouselItems" :key="index" class="swiper-slide">
              <img :src="item" alt="" style="width: 100%;">
            </div>
          </div>
          <div class="swiper-pagination"></div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
        <div class="swiper-container thumbnail-bar">
          <div class="swiper-wrapper" style="display: flex;background-color: #00447E;padding: 5px 0;">
            <div v-for="(item, index) in carouselItems" :key="index" class="swiper-slide" :class="{swiperActive:swiperActiveNum == index}" @click="goToSlide(index)" style="flex: 1;">
              <img :src="item" alt="" style="height: 100px;">
            </div>
          </div>
        </div>
      </div>
      <p class="content_text" v-html="carouselData[activeIndex].content"></p>
    </div>
  </div>
</template>
  
  <script>
import Swiper from 'swiper';
// import 'swiper/css/swiper.css';

export default {
  data() {
    return {
      carouselData: [
        { title: '泰佩思琦集团', content: '集团在纽约证券交易所交易上市。目前泰佩思琦旗下三大品牌在中国大陆地区经营门店合计超过300家，目前在海南省已有6家店铺。 <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;泰佩思琦中国区旅游零售中心 2022年4月落户综保区，将布局进入海南离岛免税和有税零售渠道，为消费者带来多元化产品和全渠道消费体验，为消费者提供更优质的服务。' },
        {
          title: '上海复星医药（集团）股份有限公司', content: '复星博毅雅呼吸机加工制造项目隶属于上海复星医药（集团）股份有限公司，专注研发生产专业呼吸通气类医疗设备。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;目前，博毅雅公司已在园区建成1300 m2的生产基地，并通过海南省药监局组织的医疗器械注册质量管理体系核查和GMP认证，获得我省第二类医疗器械注册证，首款产品Z1系列睡眠呼吸机，已于2021年7月投产，成为海南自贸港首例医疗器械进口注册证转国内生产加工项目，并走通加工增值首单。'
        },
        { title: '戴比尔斯集团', content: '戴比尔斯永恒印记隶属于世界最大的钻石生产交易商—戴比尔斯集团的钻石珠宝品牌，目前已在中国开设1000多家门店。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2021年11月27日戴比尔斯永恒印记日月广场免税店正式开业，正式进军海南离岛免税市场。在园区740平方米的钻石珠宝加工镶嵌厂房已于2021年12月装修竣工，厂房集钻石珠宝加工、金库、办公和展示功能为一体。项目初期规划加工镶嵌珠宝年产能3000件，产值约4500万元。目前已走通加工增值首单试单。' },
        { title: '晨光生物科技集团股份有限公司', content: '晨光生物科技集团股份有限公司是中国植物提取行业领军企业和全球重要的天然植物提取物生产供应商。该公司首创辣椒红色素连续提取分离技术，其辣椒红色素产销量位居世界第一，在国内外拥有30多家公司。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;晨光生物将在园区建有红辣素精加工基地，建筑面积约9000平方米，以进口其印度子公司生产的红辣素（辣椒的初级提取物）为主要原料，利用加工增值税收政策精深加工生产辣椒红色素、辣椒油树脂。目前已展开试生产，并实现加工增长免关税收单，免除关税达966万元。' },
        { title: '海南展宏食品有限公司', content: '海南展宏食品有限公司今年消博会期间与海口综合保稅区签约，立足园区面向全球直采优质进口冻品肉类，打造进口肉类加工生产及销售中心。签约完成后仅用一个多月时间就完成厂房建设验收、货物运输、加工生产、申报备案等流程环节.企业目前在园区投资建设厂房近4000平米，已于今年9月在园区完成阿根廷进口牛肉缓化、切割、炖煮、冷却、包等等加工环节后，正式报关出区实现海南白贸港首单进口牛肉“加工增值免关税”业务。' },
        { title: '海南皓晟欣科技服务有限公司', content: '海南皓晟欣科技服务有限公司是一家专业的第三方维修、检测服务提供商，具有丰富的维修经验、完善的配套设施、先进的质管与信息管理体系，企业于2022年8月注册落户海口综保区，主要从事电脑服务器等电子类产品检测维修服务，9月30日，首单维修业务正式落地，自此项目在区内维修基地被授权为全球售后检测维修中心之一。' },
        { title: '中免集团（海南）运营总部有限公司', content: '中免集团自成立以来，始终秉承“分享购物的快乐、延伸旅游的享受”的企业使命，从未停止进取的脚步。发展近30年，在全国30个省、市、自治区及港澳台地区，设立了涵盖机场、机上、边境、外轮供应、客运站、火车站、外交人员、市内和邮轮9大类型200多家免税店，成为世界上免税店类型最全、单一国家零售网点最多的免税运营商，跻身世界免税运营商前20强，不断引领着中国免税全行业的创新与发展。' },

      ],
      carouselItems: [require('./img/company1.png'), require('./img/company2.png'), require('./img/company3.png'), require('./img/company4.png'), require('./img/company5.png'), require('./img/company6.png'), require('./img/company7.png'),],
      activeIndex: 0,
      mainSwiper: null,
      thumbnailSwiper: null,
      intervalId: null,
      swiperActiveNum: 0
    };
  },
  computed: {
    thumbnailItems() {
      return this.carouselItems.map((_, index) => `Thumbnail ${index + 1}`);
    }
  },
  mounted() {
    this.initSwipers();
    this.intervalId = setInterval(() => {
      const nextIndex = (this.activeIndex + 1) % this.carouselData.length;
      this.goToSlide(nextIndex);
    }, 5000); // 设置轮播间隔时间，单位为毫秒
  },
  methods: {
    initSwipers() {
      this.mainSwiper = new Swiper('.main-carousel', {
        loop: true,

        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          slideChange: () => {
            this.activeIndex = this.mainSwiper.realIndex;
          }
        }
      });

      this.thumbnailSwiper = new Swiper('.thumbnail-bar', {
        slidesPerView: 'auto',
        slideToClickedSlide: true
      });
    },
    goToSlide(index) {
      this.mainSwiper.slideTo(index);
      this.swiperActiveNum = index
    },
    beforeDestroy() {
      clearInterval(this.intervalId);
    },
  }
};
  </script>
  
  <style scoped lang="less">
.thumbnail-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.main-carousel {
  width: 100%;
  height: auto;
}

.main-carousel .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  background-color: #f0f0f0;
}

.thumbnail-bar {
  width: 100%;
  margin-top: 10px;
}

.thumbnail-bar .swiper-slide {
  display: inline-block;
  padding: 5px 5px 0 5px;
  margin: 0 5px;
  font-size: 16px;
  background-color: #ccc;
  cursor: pointer;
}
.count_box {
  background-image: url("./img/dabg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 95%;
  height: 93%;
  padding: 20px;
  .title_box {
    height: 40px;
    background: #00447e;
    font-size: 20px;
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 40px;
    padding-left: 15px;
  }
  .banner_box {
    border: 1px solid #00447e;
    padding: 15px;
    background: rgba(0, 68, 126, 0.4);
    .content_text {
      margin-top: 15px;
      text-indent: 2em;
      line-height: 26px;
      min-height: 130px;
    }
  }
}
.swiperActive {
  background-color: #00447e !important;
  border: 1px solid #eee;
}
</style>