Swiper + Vue3 = 天作之合

前言

Swiper 是前端轮播图界的扛把子，而 Swiper Element 是它的 Web Components 版本，兼容性强、使用简单，特别适合 Vue3 项目中直接上手！

今天我们就来搞定它！

步骤一：安装 swiper

第一当然是安装依赖啦～打开你的终端，输入

npm install swiper
# 或者用 yarn
yarn add swiper

Tip：这里我们用的是 swiper 的 Web Components 版本，不是 vue-awesome-swiper 哦！vue-awesome-swiper已经不再维护啦！

步骤二：在 main.js 中注册 Swiper Element

Swiper Element 是原生 Web Component，所以要先注册一下，不然 Vue 不认识它

打开你的 main.js 或 main.ts，加入以下代码：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
// 引入 swiper 的 element bundle
import 'swiper/element/bundle'
// 注册 swiper 的自定义元素
import { register } from 'swiper/element/bundle'
register() //  必须注册！
createApp(App).mount('#app')

到这一步，Swiper 的组件就可以在全局用了！

步骤三：在组件中使用 swiper-container 和 swiper-slide

在你想放轮播图的 Vue 组件中，直接写（是不是很像原生标签？就是这么丝滑～）

<!-- App.vue -->
<template>
<swiper-container
slides-per-view="1"
navigation="true"
pagination="true"
loop="true"
style="width: 600px; height: 300px;"
>
<swiper-slide> Slide 1</swiper-slide>
<swiper-slide> Slide 2</swiper-slide>
<swiper-slide> Slide 3</swiper-slide>
</swiper-container>
</template>
<script setup>
// 不需要再引入 Swiper 组件了，已经全局注册啦～
</script>
<style scoped>
/* 可选样式：你也可以自定义按钮、分页器等样式 */
</style>

✅ 到这里，轮播图已经跑起来啦！是不是超级简单！

Bonus：监听事件也很 easy！

Swiper 的事件也能直接监听，像这样

<swiper-container
@slidechange="onSlideChange"
@swiperprogress="onProgress"
>
<swiper-slide> Slide A</swiper-slide>
<swiper-slide> Slide B</swiper-slide>
</swiper-container>
<script setup>
function onSlideChange(e) {
console.log('Slide changed!', e.detail)
}
function onProgress(e) {
console.log('Swiper progress:', e.detail)
}
</script>