nuxt-swiper

Swiper.js用のNuxtモジュールです。ハードウェアアクセラレーションによるトランジションを備えた、最もモダンなモバイルタッチスライダーです。

14.6万ダウンロード•288スター•v2.0.1

Nuxt Swiper

!重要Nuxt Swiperは、Webコンポーネントを使用してSwiper.jsを基盤としています。このモジュールを利用する前、およびNuxt Swiperに直接関係のない問題を報告する前に、必ずSwiper.jsのドキュメントをお読みください。根本的なバグがある場合は、Swiper.jsのリポジトリに問題を提出してください。

!注意Vue.jsでWebコンポーネントを使用する方法を学びたい場合は、こちらのドキュメントを参照してください。Vue.js Web Components

機能

📖 オープンソース
🪄 TypeScriptサポート
✅ 自動インポート有効
✨ 箱から出してすぐに魔法のように動作します

セットアップ

オンラインで試す

ステップ1：モジュールをインストール

npx nuxi@latest module add swiper

使用方法

!注意これらはWebコンポーネントであるため、Vueが使用するcamelCase命名規則ではなく、kebab-case命名規則を使用します。

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.dokyumento.jp/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.dokyumento.jp/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>

💻 開発

ローカル開発

このリポジトリをクローンする
Node.jsの最新LTSバージョンをインストールしてください
corepack enable を使用して Corepack を有効にする
pnpm installを使用して依存関係をインストールする
pnpm dev:prepareを使用してタイプスタブを生成します
pnpm devを使用してテストを実行します

クレジット

Swiper.jsは@nolimits4webによって開発されています。

Nuxt Swiperは@cpreston321によって開発されています。

📧 お問い合わせ

X (旧Twitter) - @christian_ggg

また、私の仕事が気に入ったら、お気軽にコーヒーをおごってください☕️