nuxt-swiper

Swiper.js 的 Nuxt 模組 - 最現代的移動觸控滑動器，具有硬體加速過渡。

Nuxt Swiper

!重要Nuxt Swiper 利用 Swiper.js 作為其基礎，使用其 Web 元件。請確保在使用此模組並報告任何與 Nuxt Swiper 不直接相關的問題之前，閱讀 Swiper.js 文件。如果存在底層錯誤，請向 Swiper.js 倉庫提交問題。

!注意如果您想學習如何在 Vue.js 中使用 Web 元件，請參閱此處的文件：Vue.js Web 元件

功能

📖 開源
🪄 TypeScript 支援
✅ 啟用自動匯入
✨ 開箱即用，如同魔法般好用

設定

線上試用

步驟 1：安裝模組

npx nuxi@latest module add swiper

使用

!注意由於這些是 Web 元件，它們使用 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://swiperjs.com/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://swiperjs.com/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>

💻 開發

本地開發

克隆此倉庫
安裝最新 LTS 版本的 Node.js
使用 corepack enable 啟用 Corepack
使用 pnpm install 安裝依賴
使用 pnpm dev:prepare 生成型別存根
使用 pnpm dev 執行測試

鳴謝

Swiper.js 由 @nolimits4web 開發。

Nuxt Swiper 由 @cpreston321 開發。

📧 聯絡方式

X（以前稱為 Twitter）- @christian_ggg

另外，如果您喜歡我的作品，請隨意給我買杯咖啡 ☕️