Nuxt Swiper

[!IMPORTANT]

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

[!NOTE]

Vue.js でウェブコンポーネントの使い方を学びたい場合は、こちらのドキュメントをご参照ください：Vue.js Web Components

特徴

• 📖 オープンソース
• 🪄 TypeScript サポート
• ✅ 自動インポート対応
• ✨ すぐに使える、まるで魔法のように

セットアップ

オンラインで試す

ステップ 1: モジュールをインストールする

npx nuxi@latest module add swiper

使用法

[!注意]

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

| Swiper コンポーネント（WebComponent） | | -------------------------------- | | | | |

モジュールオプション

interface ModuleOptions {
  /
   
Enable custom Swiper composables to help you access Swiper instance.
   
@example ``vue

   

   
*
   

   
`

   
@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
}

基本的な使い方

高度な使用法

クレジット

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

Nuxt Swiper`は@cpreston321によって開発されました。

📧 連絡先

X（旧Twitter） - @christian_ggg

また、もし私の仕事を気に入っていただけたら、ぜひコーヒーをご馳走してください☕️

貢献者

MIT ライセンス © 2025 CP

--- Tranlated By Open Ai Tx | Last indexed: 2025-12-15 ---