vue3 引入swiper11 自动播放

### 实现 Vue3 项目中 Swiper11 的自动播放

为了在 Vue3 中集成 Swiper11 并启用自动播放功能，需按照如下方式操作：

#### 安装依赖包
首先，在命令行工具中执行 npm 或 yarn 命令来安装 `swiper` 及其样式文件。

npm install swiper@latest

或者使用 Yarn:

yarn add swiper@latest

#### 组件内引入 Swiper 和 自动播放模块

确保在需要使用的组件内部正确导入必要的 Swiper 模块以及 CSS 文件。对于自动播放的支持，还需要额外加载对应的模块。

<script setup>
// 导入所需的 Swiper 核心库及其子组件
import { Swiper, SwiperSlide } from 'swiper/vue';
// 导入所需的功能模块——这里指定了 Autoplay 功能
import { Autoplay } from 'swiper';

// 如果页面上会多次用到 Swiper，则可以考虑全局注册这些模块；如果仅限于单个实例则局部注入即可
Swiper.use([Autoplay]);

// 引入样式表
import 'swiper/css';
</script>

<template>
<div class="swiper-container">
    <!-- 配置属性中的 autoplay 开启自动播放 -->
    <swiper :modules="[Autoplay]" :autoplay="{ delay: 2500, disableOnInteraction: false }" loop>
        <swiper-slide>幻灯片内容1</swiper-slide>
        <swiper-slide>幻灯片内容2</swiper-slide>
        <swiper-slide>幻灯片内容3</swiper-slide>
    </swiper>
</div>
</template>

上述代码展示了如何设置 Swiper 来支持自动播放特性，并设置了每张图片停留时间为 2.5 秒(`delay`)，即使用户交互也不会停止自动播放 (`disableOnInteraction=false`) ，并且开启了循环模式 (`loop=true`) [^2]。