vue3引用swiper7.4.1使用

1、我的需求是轮播图兼容pc和移动端，pc端可滑动，点击指示点可到当前图片

2、移动端可滑动

3、点击banner可跳转链接，返回页面轮播继续

yarn add swiper@7.4.1

<template>
  <div class="norem-home">
      <Swiper
      :modules="modules"
      :slides-per-view="1"
      :space-between="50"
      :autoplay="swiper_options.autoplay"
      :pagination="{ clickable: true }" 
      :Scrollbar="{ draggable: true }"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <SwiperSlide v-for="(item, index) in imgList"
        :key="index"  :style="{ backgroundColor: item.background }">
        <!-- <img @click="jumpType(item)" :src="item.url" alt=""> -->
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<script setup lang="ts">
	import { computed, reactive, ref, toRefs, toRaw } from 'vue'
  import { Swiper, SwiperSlide } from 'swiper/vue'
  import { Navigation, Pagination, Autoplay } from 'swiper'
  import 'swiper/css'
  import 'swiper/css/pagination'
  
  let modules = [ Navigation, Pagination, Autoplay]

// 兼容轮播图点击事件，跳转等操作后轮播不会继续轮播
const swiper_options: any = {
  autoplay: {
    disableOnInteraction: false, // 鼠标滑动后继续自动播放
    delay: 3000, // 3秒切换一次
  },
};
  // 定义接口
  interface imgUrl {
    url: string
    background: string
  }
  const imgList =  ref<imgUrl[]>([])
  imgList.value=[
    {
      url:'https://www.apple.com.cn/v/iphone/home/bg/images/overview/hero/iphone_13_pro_hero__gqclakbze4a6_large.png',
      background:'yellow'
    },
    {
      url:'https://www.apple.com.cn/v/iphone-13-pro/f/images/overview/hero/hero_endframe__3tq53uan9teq_xlarge.jpg',
      background:'pink'
    },
    {
      url:'https://www.apple.com.cn/v/iphone-13-pro/f/images/overview/design/finishes_1_static__lrwz60bo1d26_large.jpg',
      background:'darkturquoise'
    },
  ]
  //获取swiper对象
  const onSwiper = (swiper) => {
    // console.log(swiper);
  };
 
  //轮播图改变触发的事件
  const onSlideChange = () => {
    // console.log("slide change");
  }
// banner跳转
const jumpType = (obj: any): void => {
  if (obj.jumpType == 2 || obj.jumpType == 3) {
    window.open(obj.jumpSource, "_blank");
  }
};
</script>

<style lang="less" scoped>
.norem-home{
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  .swiper {
    height: 460px;
    margin: 20px 0;
    border-radius: 20px;
    .swiper-slide {
      width: 1200px;
      height: 432px;
      border-radius: 20px;
      img {
        width: 1200px;
        height: 432px;
        background: yellow;
        border-radius: 20px;
      }
    }
     //这里兼容swiper组件复制的第一张图片高度没有加载到，单独设置一下高度
     :deep(.slick-slide) {
        width: 100%;
        height: 432px;
        overflow: hidden;
        @media screen and (max-width: 670px) {
          height: 332px;
        }
        @media screen and (max-width: 470px) {
          height: 232px;
        }
      }
    //指示圆点颜色
    :deep(.swiper-pagination) {
        bottom:0px;
        .swiper-pagination-bullet {
          background: #EDEEF2;
        }
        .swiper-pagination-bullet-active {
          background: #76B9FF;
        }
    }
   
  
  }


  
}
</style>