nolimits4web/swiper

これは何？

主な機能

• 01設定可能な1:1のタッチ移動に対応した、タッチ操作重視のスライダー。
• 021画面あたりのスライド数、グループ数、間隔を調整できるflexboxレイアウト。
• 03ページネーション、ナビゲーション矢印、スクロールバーを標準搭載。
• 04フェード、フリップ、3Dキューブ、3Dカバーフローのトランジション効果。
• 05画像の多いカルーセルや大規模なカルーセル向けの遅延読み込みと仮想スライド。
• 06TypeScriptの型定義を備えた、ツリーシェイキング可能なモジュール。jQueryへの依存なし。

ユースケース

• モバイルフレンドリーなWebサイトに画像ギャラリーや商品カルーセルを作成する。
• モバイルWebアプリにスワイプ可能なオンボーディング画面やバナーセクションを追加する。
• CSSだけの設定で複数行・複数列のスライドレイアウトを作成する。
• サムネイルスライダーとメインスライダーを連動させ、互いに操作できるようにする。

クイックスタート

1. 1

   npmからSwiperをインストールする

   npm install swiper
2. 2

   開発版をビルドする（リポジトリをcloneした後、ルートディレクトリで実行）

   npm install && npm run build
3. 3

   playgroundフォルダからCoreのデモを実行する

   npm run core

使う前に知っておきたいこと

• !すべてのプラットフォームに対応しているわけではありません。対象は最新のブラウザとモバイルアプリのみです。

トピック

よくある質問

swiper とは？

モバイルサイトやアプリ向けの、ハードウェアアクセラレーション対応でjQueryに依存しない、タッチ操作を重視した無料のJavaScriptスライダー。 Swiperは、モバイルサイトやモバイルWebアプリ、ネイティブアプリやハイブリッドアプリでのタッチ操作に特化したJavaScriptスライダーライブラリです。flexboxベースのスライドレイアウトを採用しているため、スライドのサイズやグリッドをCSSと、1画面あたりのスライド数、グループごとのスライド数、間隔などの初期化パラメーターで制御できます。

swiper は無料で使えますか？ライセンスは？

swiper は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

swiper は今もメンテナンスされていますか？

活発にメンテナンス中。swiper の最終コミットは 2026年10月16日 です。

swiper は何に使えますか？

モバイルフレンドリーなWebサイトに画像ギャラリーや商品カルーセルを作成する。 モバイルWebアプリにスワイプ可能なオンボーディング画面やバナーセクションを追加する。 CSSだけの設定で複数行・複数列のスライドレイアウトを作成する。 サムネイルスライダーとメインスライダーを連動させ、互いに操作できるようにする。

swiper のインストール方法は？

npmからSwiperをインストールする: npm install swiper 開発版をビルドする（リポジトリをcloneした後、ルートディレクトリで実行）: npm install && npm run build playgroundフォルダからCoreのデモを実行する: npm run core

swiper はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/nolimits4web/swiper