ネイティブのタッチ・スワイプ操作に対応したスライダーを簡単に実装できるJavaScriptライブラリ keen-slider

ネイティブのタッチ・スワイプ操作に対応したさまざまなスライダーを実装できるJavaScriptライブラリを紹介します。

依存関係は一切なし、IE10を含むすべてのブラウザをサポートしています。

サイトのキャプチャ

keen-slider
keen-slider -GitHub

keen-sliderの特徴

keen-sliderはネイティブのタッチ・スワイプ操作と優れたパフォーマンスを備えた、スライダーを実装できるJavaScriptライブラリです。

keen-sliderの特徴

keen-sliderの特徴

  • ネイティブのタッチ・スワイプ操作に対応
  • 依存関係はなし
  • typescriptサポート
  • IE10を含む、すべてのブラウザをサポート
  • MITライセンスで、商用プロジェクトでも無料で利用できます

keen-sliderのデモ

keen-sliderでは、さまざまなタイプのスライダーを実装できます。
デスクトップで操作する時は、ドラッグしてください。

デモのキャプチャ

デモ: Basic

デフォルトの標準的なスライダーをはじめ、ループ、スナップ、垂直タイプのものがあります。

デモのキャプチャ

デモ: Basic

複数のパネルを表示したり、スペースを与えたり、レイアウトの自由度は高いです。

デモのキャプチャ

デモ: Navigation

Navigationは、左右のアローと下のドットでスライダーを操作できます。

デモのキャプチャ

デモ: Media

Mediaにはかっこいいスライダーが揃っています。FADERはフェードで切り替わるスライダー、LAZY LOADはレイジーロード対応のスライダー、ZOOM OUTはズームで切り替わるスライダーです。

デモのキャプチャ

デモ: Date/Time Picker

日付や時間のピッカーは、iOSの日時ピッカーに基づいたデザインです。

デモのキャプチャ

デモ: Misc

その他のMiscには、エンドレスにスワイプできるスライダー、背景が回転するスライダー、自動再生スライダーがあります。

keen-sliderの使い方

インストール

keen-sliderは、Web用に構築されたすべてのJavaScriptまたはTypeScriptのプロジェクトで使用でき、NPM経由で簡単にインストールできます。

モジュールとして追加

HTML

当スクリプトとスタイルシートを外部ファイルとして記述し、スライダーはdiv要素で実装します。

Reactのフックとして追加

さらに詳しい情報は、ドキュメントをご覧ください。

デモのキャプチャ

keen-sliderのドキュメント

sponsors

top of page

©2020 coliss