Nuxt Swiper
!重要提示Nuxt Swiper 利用 Swiper.js 作为其基础，并使用其 Web Components。在使用此模块并报告任何与 Nuxt Swiper 没有直接关系的问题之前，请务必阅读 Swiper.js 文档。如果存在底层 bug，请向 Swiper.js 存储库 提交问题。
!注意 如果您想学习如何在 Vue.js 中使用 Web Components，请参阅此处的文档：Vue.js Web Components
功能
- 📖 开源
- 🪄 TypeScript 支持
- ✅ 启用自动导入
- ✨ 开箱即用，如同魔法般
设置
在线尝试
步骤 1：安装模块
npx nuxi@latest module add swiper
使用
!注意 由于这些是 Web Components，它们使用 kebab-case 命名约定，而不是 Vue 使用的 camelCase 命名约定。
| Swiper 组件 (WebComponent) |
|---|
<swiper-container/> |
<swiper-slide /> |
模块选项
interface ModuleOptions {
/**
* Enable custom Swiper composables to help you access Swiper instance.
* @example ```vue
* <script setup>
* const swiperRef = ref<null>(null)
* const swiper = useSwiper(swiperRef, { loop: true, autoplay: { delay: 5000 })
*
* const next = () => swiper.next()
* </script>
*
* <template>
* <swiper-container ref="swiperRef" :init="false">
* <swiper-slide>Slide 1</swiper-slide>
* <swiper-slide>Slide 2</swiper-slide>
* </swiper-container>
* </template>
* ```
* @default true
*/
enableComposables?: boolean
/**
* Bundle Swiper custom elements.
* if disabled, you need to import swiper css and modules manually.
* @see https://swiper.js.cn/element#core-version--modules
* @default true
*/
bundled?: boolean
}
基本用法
<script setup lang="ts">
// Create 10 slides
const containerRef = ref(null)
const slides = ref(Array.from({ length: 10 }))
const swiper = useSwiper(containerRef)
onMounted(() => {
// Access Swiper instance
// Read more about Swiper instance: https://swiper.js.cn/swiper-api#methods--properties
console.log(swiper.instance)
})
</script>
<template>
<ClientOnly>
<swiper-container ref="containerRef">
<swiper-slide
v-for="(slide, idx) in slides"
:key="idx"
style="background-color: rgb(32, 233, 70); color: white;"
>
Slide {{ idx + 1 }}
</swiper-slide>
</swiper-container>
</ClientOnly>
<!-- Go back one slide -->
<button @click="swiper.prev()">
Prev
</button>
<!-- Go forward one slide -->
<button @click="swiper.next()">
Next
</button>
</template>
<style lang="css">
swiper-slide {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
height: 20vh;
font-size: 4rem;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
</style>
高级用法
<script setup lang="ts">
const containerRef = ref(null)
const slides = ref(Array.from({ length: 10 }))
const swiper = useSwiper(containerRef, {
effect: 'creative',
loop: true,
autoplay: {
delay: 5000,
},
creativeEffect: {
prev: {
shadow: true,
translate: [0, 0, -400],
},
next: {
shadow: true,
translate: [0, 0, -400],
},
},
})
onMounted(() => {
console.log(swiper.instance)
})
</script>
<template>
<ClientOnly>
<swiper-container ref="containerRef" :init="false">
<swiper-slide
v-for="(slide, idx) in slides"
:key="idx"
style="background-color: rgb(32, 233, 70); color: white;"
>
Slide {{ idx + 1 }}
</swiper-slide>
</swiper-container>
</ClientOnly>
</template>
<style lang="css">
swiper-slide {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
height: 20vh;
font-size: 4rem;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
</style>
💻 开发
本地开发
鸣谢
Swiper.js 由 @nolimits4web 开发。
Nuxt Swiper 由 @cpreston321 开发。
📧 联系方式
X (原 Twitter) - @christian_ggg
此外，如果您喜欢我的作品，请随时 给我买杯咖啡 ☕️
