vue3+Swiper11简易封装，附上常用属性介绍，放心食用，最后附上官网地址。

🔮 欢迎点赞 👍٩( ´︶` )( ´︶` )۶ 收藏 🌟留言 💌 欢迎讨论！💕
🔮 本文由 【第四人称Alice】 原创，首发于 CSDN ✨✨✨
🌍 由于博主还属于前期的前端开发小白，欢迎大家留言提出更好的意见，大家共同进步！💭

说明一下，博主使用的是v3.2.0版本，swiper版本为"swiper": "^11.0.3"。

1、模板部分

1.1属性介绍

属性	介绍
slidesPerView	设置slider容器能够同时显示的slides数量(carousel模式)。 可以设置为数字（小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。
autoplay	autoplay:{ delay: 2000 ,disableOnInteraction: false } autoplay为自动切换函数； delay：轮播项的延迟时间； disableOnInteraction：用户操作之后时候禁止自动切换。
navigation	使用前进后退按钮来控制Swiper切换。
pagination	pagination="{ type: 'bullets', clickable: true }" pagination：使用分页器导航； type：分页器样式； clickable是否可点击跳转到对应图片。
scrollbar	scrollbar="{ draggable: true }" scrollbar：设置滚动条，draggable：该参数设置为true时允许拖动滚动条。
direction	Swiper的滑动方向，可设置为水平方向切换 horizontal 或垂直方向切换 vertical 。
space-between	在slide之间设置距离（单位px）。
modules	在项目中引入swiper 时，需要用到的 Swiper 模块。

1.2事件介绍

@swiper：事件函数，返回swiper实例

@slideChange：事件函数。在当前Slide切换到另一个Slide时执行(activeIndex发生改变)，一般是在点击控制组件、释放滑动的时间点。

<template>
  <div class="swiper">
    <swiper 
    :slidesPerView="1" 
    :autoplay="{ delay: 2000, disableOnInteraction: true }"
    :navigation="true" 
    :pagination="{ type: 'bullets', clickable: true }"
    :scrollbar="{ draggable: true }" 
    :space-between="0" 
    :modules="modules" 
    @mouseenter="enter" 
    @mouseleave="leave" 
    @swiper="onSwiper" 
    @slideChange="onSlideChange">
      <swiper-slide v-for="(item, index) in props?.swiperImgArray" :key="index" class="swiperItem"><img :src="item.img" alt="" /></swiper-slide>
    </swiper>
  </div>
</template>

2、逻辑部分

<script setup lang="ts">
import { toRaw } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/less/navigation";
import "swiper/less/pagination";
import { Autoplay, Navigation, Pagination, Scrollbar, A11y } from "swiper/modules";
interface B {
  img: string;
}
const props = defineProps<{ swiperImgArray: B[] }>();

let modules = [Autoplay, Navigation, Pagination, Scrollbar, A11y];
//定义swiperNew,目的获取非响应式swiper
let swiperNew: any;

//鼠标移入
const enter = () => {
  swiperNew.autoplay.stop();
};
//鼠标移出
const leave = () => {
  swiperNew.autoplay.start();
};
const onSwiper = (swiper: any) => {
  // console.log(swiper);

  swiperNew = toRaw(swiper); //拿到swiper对象再转换为非响应式
};
const onSlideChange = () => {
  // console.log("slide change");
};
</script>

3、样式部分

<style lang="less" scoped>
.swiper {
  //   margin-top: 300px;
  width: 1200px;
  height: 500px;

  img {
    width: 1200px;
    height: 500px;
  }

  .swiperItem {
    // border: aqua solid 1px;
    // height: 200px;
  }
}

:deep(.swiper-pagination) .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: rgb(229, 180, 127);
}

:deep(.swiper-pagination-bullet) {
  //修改分页器圆点大小
  width: 14px;
  height: 14px;
  background-color: #fff;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
:deep(.swiper-pagination-horizontal.swiper-pagination-bullets) .swiper-pagination-bullet {
  // 分页器远点之间的距离
  margin: 0 20px;
}

:deep(.swiper-button-prev),
:deep(.swiper-button-next) {
  color: rgb(229, 180, 127);
}
</style>

4、官网地址

中文官网：中文api - Swiper中文网

注意：（非最新版本：中文版目前只更新到swiper10，小伙伴们可以先参考10去搜索属性方法。）

英文官网：Swiper Vue.js Components

更新中...