vue3（语法糖写法）+ts+swiper(轮播图)

1. npm安装swiper(版本不是最新版本)

npm i swiper@7

2.引入（按照官方引入会报错，找不到该模块）

<script lang='ts' setup>
import { EffectCoverflow, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
//引入全部的样式 
import "swiper/swiper-bundle.min.css";
import { ref, reactive } from 'vue'
let modules = [EffectCoverflow, Pagination]
</script>

3. 具体使用例子

官方事例地址：https://github.surmon.me/vue-awesome-swiper

• html

<template>
  <div class="my-resolve-page">
    <div class="my-title">解决方案</div>
    <div class="my-title-en">SOLUTION</div>
    <div class="my-content">
      <swiper :effect="'coverflow'" :grabCursor="true" :initialSlide="2" :centeredSlides="true" :slidesPerView="'auto'"
        :coverflowEffect="{
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        }" :pagination="true" :modules="modules">
        <swiper-slide v-for="(item, index) in data" :key="index" class="my-swiper-item"
          style="width: 350px;height: 430px;background-color: #fff;">
          <div class="my-swiper-item-box">
            <img style="width: 350px;height: 350px;" :src="item.src" alt="">
            <div class="my-swiper-txt">{{ item.name }}</div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="my-more">
      <div class="my-more-btn">了解更多</div>
    </div>
  </div>
</template>

• ts

<script lang='ts' setup>
import 'animate.css';
import { EffectCoverflow, Pagination } from "swiper";

import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";

import "swiper/swiper-bundle.min.css";

import { ref, reactive } from 'vue'
let modules = [EffectCoverflow, Pagination]
let data = reactive([
  { name: '应急管理', src: require('@/assets/images/resolve/resolve1.png') },
  { name: '呼叫中心', src: require('@/assets/images/resolve/resolve2.png') },
  { name: '化工园区', src: require('@/assets/images/resolve/resolve3.png') },
  { name: '巡检业务', src: require('@/assets/images/resolve/resolve4.png') },
  { name: '物资管理', src: require('@/assets/images/resolve/resolve5.png') },
])

</script>

• less

<style scoped lang='less'>
.my-resolve-page {
  width: 100%;
  height: 500px;
  padding-top: 10px;

  .my-title {
    text-align: center;
    margin-top: 10px;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
  }

  .my-title-en {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 24px;
    color: #0057b6;
  }

  .my-content {
    .my-swiper-item {
      cursor: pointer;
      overflow: hidden;

      .my-swiper-item-box {
        color: #58596d;
        transition: all .5s;

        &:hover {
          transform: scale(1.04);
          color: #409eff !important;
        }
      }

      .my-swiper-txt {
        width: 100%;
        text-align: center;
        height: 80px;
        line-height: 80px;
        font-size: 21px;
      }

    }


  }

  .my-more {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;

    .my-more-btn {
      width: 100px;
      height: 40px;
      line-height: 40px;
      border-radius: 20px;
      text-align: center;
      background-color: #0057b6;
      color: #fff;
      cursor: pointer;

      &:hover {
        background-color: #0058b6b7;
      }
    }
  }
}

.swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}

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

• 效果

  
  image.png