Swiperは、モバイルサイトやWebアプリ向けに作られたタッチスライダー・カルーセルライブラリです。ハードウェアアクセラレーションを使ったトランジションとネイティブに近いスワイプ挙動を提供します。コアはフレームワーク非依存で、React・Vue・Web Componentsそれぞれ向けのラッパーも同梱しています。
src/core/core.tsを中心に、タッチイベント(onTouchStart・onTouchMove・onTouchEnd)を検知してtranslate値を計算し、CSSのtransformでスライドを動かす仕組みです。src/core/translate配下でmin・max・現在位置を管理し、src/core/slide配下のslideTo系関数でスライド番号から移動先座標を求めます。ページネーションやナビゲーション、エフェクト(fade・cube・coverflow・flipなど)は独立した「モジュール」として実装されていて、必要な機能だけをimportするツリーシェイク構造です。src/copy/package.jsonのexportsマップを見ると、swiper/core・swiper/bundle・swiper/element・各種CSSサブパスが細かく分離されており、ビルド時にdist/へ出力される設計だとわかります。React・Vueラッパーはsrc/components-shared配下のget-params・mount-swiper・update-swiperなどの共通ロジックを通してコアSwiperインスタンスを生成・更新します。
- STEP 01
npm installを実行すると、rollup・typescript・vite・lessなどビルド関連の依存が多数入り、少し時間がかかるはずです。
- STEP 02
npm run buildを実行すると、scripts/build.jsがsrc/配下のTypeScriptとLessをコンパイルし、dist/にswiper.mjsやswiper-bundle.cssなどが生成されます。
- STEP 03
npm run coreでplayground/core/index.htmlがVite経由で立ち上がり、ナビゲーション・ページネーション・スクロールバー付きのスライダーがブラウザで実際に動くのが見えます。
- STEP 04
npm run reactやnpm run vueを試すと、playground/react/App.jsxやplayground/vue/App.vueがそれぞれのフレームワーク用ラッパー経由でSwiperを描画します。
- STEP 05
demos/フォルダにある40件超のHTMLサンプル(効果・レイアウト・ループなど)をnpm run demosで一覧から選んで確認できます。
- STEP 06
npm testを実行すると、型定義の互換性テスト・SSRテスト・要素DOMテスト・バンドルサイズ検証など、v14で追加された複数の検証スクリプトが順に走ります。
手元に残るのは、dist/フォルダに生成されるコア本体(swiper.mjs)・バンドル版(swiper-bundle.mjs)・Web Components版(swiper-element)・各種CSSと型定義一式です。またplaygroundとdemosを通じて、ナビゲーション付き・ループ・エフェクト・仮想スライドなど実際の挙動をブラウザで確認できる状態になります。
READMEに明記されている通り、Swiperは全プラットフォーム互換ではなく、モダンなブラウザ・アプリ向けに絞った設計です。.browserslistrcではiOS・Safariともにバージョン17以上が対象になっています。
tests/consumer-types/README.mdによると、v14では型定義の解決方法が大きく変わっており、moduleResolutionの設定(node・node16・bundler)によって型の解決結果が異なる点に注意が必要です。
本番では必ずdist/配下のファイルを使う設計で、src/を直接importする運用は想定されていません。
既存のjQueryなどに依存せず、モバイル中心のタッチスライダーを軽量かつモジュール単位で導入したいプロジェクトに向いています。React・Vue・Web Componentsいずれの構成でも同じコアロジックを共有できる点は実務上の安心材料です。ファイルツリーとpackage.jsonのexportsマップ、tests/consumer-types/README.mdの記述から、ビルド出力の構造と型互換性テストの仕組みが具体的に確認できるため、実際にインストールしなくても構成と挙動の妥当性は十分に判断できます。