始めましょう|ドキュメント|デモ
スワイパー
Swiper-ハードウェアが加速された遷移と驚くべきネイティブの動作を備えた無料の最も近代的なモバイルタッチスライダーです。モバイルWebサイト、モバイルWebアプリ、モバイルネイティブ/ハイブリッドアプリで使用することを目的としています。
Swiperはすべてのプラットフォームと互換性がありません。これは、最新のアプリ/プラットフォームにのみ焦点を当てて、最高の体験とシンプルさをもたらすモダンなタッチスライダーです。
スポンサー
特徴
- ツリーシェーク可能:使用するモジュールのみがアプリのバンドルにインポートされます。
- モバイルフレンドリー:モバイルWebサイト、モバイルWebアプリ、モバイルネイティブ/ハイブリッドアプリで使用することを目的としています。
- ライブラリアゴーティス:Swiperは、JQueryのようなJavaScriptライブラリを必要としません。これにより、Swiperははるかに小さく速くなります。 JQuery、Zepto、JQuery Mobileなどのライブラリで安全に使用できます。
- 1:1タッチムーブメント:デフォルトでは、Swiperは1:1タッチの動きの相互作用を提供しますが、この比率はスイパー設定で構成できます。
- 突然変異オブザーバー:Swiperには突然変異オブザーバーを有効にするオプションがあります。この機能により、Swiperは自動的に再編成され、DOMまたはSwiper Styles自体に動的な変更を加えると、必要なすべてのパラメーターが再計算されます。
- リッチAPI :Swiperには非常にリッチAPIが付属しています。これにより、独自のページネーション、ナビゲーションボタン、視差効果などを作成できます。
- RTL :Swiperは、正しいレイアウトで100%RTLサポートを提供する唯一のスライダーです。
- Multi Row Slides Layout :Swiperは、列あたり数枚のスライドを備えた複数の行スライドレイアウトを可能にします。
- 遷移効果:フェード、フリップ、3Dキューブ、3Dカバーフロー。
- 双方向制御:スワイパーは、他の数のスイパーのコントローラーとして使用でき、同時に制御されることもできます。
- 完全なナビゲーションコントロール:Swiperには、ページネーション、ナビゲーション矢印、スクロールバーなど、必要なすべての組み込みナビゲーション要素が付属しています。
- FlexBoxレイアウト:Swiperは、スライドレイアウトに最新のFlexboxレイアウトを使用します。これは、サイズのcaclulationsで多くの問題と時間を解決します。このようなレイアウトにより、純粋なCSSを使用してスライドグリッドを構成することもできます。
- 最も柔軟なスライドレイアウトグリッド:Swiperには、初期化に多くのパラメーターがあり、可能な限り柔軟になります。ビューごと、列ごと、グループごと、スライド間のスペースなどを制御できます。
- 画像怠zyな読み込み:スワイパーの怠zyなロードは、ユーザーがスワイプするまで、非アクティブ/見えないスライドの画像のロードを遅延させます。このような機能により、ページの読み込みが速くなり、スワイパーのパフォーマンスが向上する可能性があります。
- バーチャルスライド:Swiperには、多くのスライドまたはコンテンツが多い/画像が多いスライドがある場合に最適な仮想スライド機能が付属しているため、必要な量のスライドをDOMに保持します。
- ループモード
- オートプレイ
- キーボード制御
- マウスホイール制御
- ネストされたスライダー
- 歴史ナビゲーション
- ハッシュナビゲーション
- ブレークポイントの構成
- アクセシビリティ(A11y)
- そしてもっと...
コミュニティ
SwiperコミュニティはGithubディスカッションで見つけることができます。ここでは、質問をしたり、声のアイデアをしたり、プロジェクトを共有したりできます。
私たちの行動規範は、すべてのスワイパーコミュニティチャネルに適用されます。
dist / build
生産使用ファイル(JSおよびCSS)では、 dist/
フォルダーからのみ、最も安定したバージョンがあります。
開発ビルド
すべての依存関係をリポジトリのルートにインストールします。
Swiperの開発バージョン:
結果はdist/
フォルダーで使用できます。
ランニングデモ:
./playground
フォルダーにあるすべてのデモ。そこには、Core(HTML、JS)、React、Vueバージョンがあります。デモを開くには、実行してください:
- コア:
npm run core
- React :
npm run react
- Vue :
npm run vue
生産ビルド
生産バージョンはdist/
フォルダーで利用できます。
貢献
すべての変更は、 src/
ファイルのみにコミットする必要があります。問題を開く前に、貢献ガイドラインを確認してください。
主要なロードマップ機能
- 最高の機能リクエスト(「反応を使用して自分の投票を追加)
- トップバグ? (反応を使用して自分の投票を追加します)
貢献者
コード貢献者
このプロジェクトは、貢献するすべての人々のおかげで存在します。 [貢献する]。
金融貢献者
財政的な貢献者になり、コミュニティを維持するのを手伝ってください。 [貢献する]