vue3使用swiper默认展示第一张

### 实现 Vue3 中 Swiper 默认显示第一张幻灯片

为了确保在 Vue3 项目中使用 Swiper 组件时默认展示第一张幻灯片，需按照如下方式配置：

#### 安装依赖包
首先，在 `package.json` 文件内添加合适的依赖项。对于 Vue3 版本的项目来说，推荐安装最新版的 `swiper/vue` 和样式文件。

npm install swiper@latest vue-awesome-swiper --save

#### 配置全局变量或插件
如果希望在整个应用范围内访问 Swiper，则可以在项目的入口文件 `main.js` 或者 `main.ts` 进行初始化设置[^1]。

import { createApp } from 'vue';
import App from './App.vue';

// 引入 Swiper 核心库以及 CSS 文件
import Swiper, { Navigation, Pagination } from 'swiper';
import 'swiper/swiper-bundle.min.css';

// 注册模块到 Swiper 类上
Swiper.use([Navigation, Pagination]);

const app = createApp(App);
app.config.globalProperties.$swiper = Swiper;
app.mount('#app');

#### 使用 Swiper 组件并指定初始选项
创建一个新的组件用于承载 Swiper 轮播实例，并通过属性传递来控制其行为特性。特别注意的是要设定 `initialSlide` 参数为0以指明从第一页开始播放[^2]。

<template>
  <div class="swiper-container">
    <!-- 添加轮播容器 -->
    <swiper :modules="[Navigation,Pagination]" :slides-per-view="1" :space-between="50"
            @swiper="onSwiper" @slideChange="onSlideChange" :initialSlide="0">
      <swiper-slide v-for="(item,index) in slidesData" :key="index">{{ item }}</swiper-slide>
    </swiper>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";

// 导入所需的 Swiper 功能模块
import { Navigation, Pagination } from "swiper";

// 初始化数据列表
let slidesData = ["Slide 1", "Slide 2", "Slide 3"];

function onSwiper(swiperInstance: any){
  console.log(`当前激活的幻灯片编号:${swiperInstance.realIndex}`);
}

function onSlideChange(){
  console.log("滑动事件触发");
}
</script>

<style scoped>
/* 自定义样式 */
.swiper-container {
  width: 100%;
  height: 300px;
}
</style>

上述代码片段展示了如何在一个基于 TypeScript 的 Vue3 单文件组件 (SFC) 中集成 Swiper 并使其启动时定位到第一个元素位置[^3]。