loading_logo

【簡単】 軽量で汎用性抜群のスライダー keen-slider.js

スポンサーリンク

こんにちは、マルオです。
フリーランスのWEBデザイナーです。

これまで数多くのサイト制作をしてきて、
スライダーをjsで実装することがたくさんあります。

ボクは特に今までSlickSwiperを使うことが多いです。
ここ最近ではとくに柔軟にカスタマイズできるSwiperを使用してます。

理由としては、ここ最近使用する機会が減ってきたjQueryに依存しないことが大きいな要因でした。
Swiperにも満足しているのですが、さらにより良いスライダーのJavaScriptライブラリはないかと探していたら見つけました。

スポンサーリンク

タッチ・スワイプが滑らかなスライダー keen-slider.js

ネイティブのタッチ・スワイプ操作に対応しているさまざまなスライダーを実装できるJavaScriptライブラリkeen-slider.js

keen-sliderは、Swiper同様jQueryに依存は一切しないし、
IE10を含むすべてのブラウザをサポートしてます。

初見でタッチ・スワイプがとにかく滑らかだと感じました。

keen-slider.jsの特徴

  1. ネイティブのタッチ・スワイプ操作に対応
  2. ライブラリに依存しない
  3. typescriptサポート
  4. IE10を含む、すべてのブラウザをサポート対応
  5. MITライセンスで、商用でも無料で利用可能

keen-slider.jsのデモ

keen-sliderは、SwiperやSlick同様にいろいろなタイプのスライダーを実装できます。

ベーシック デモ

  1. ループ
  2. カルーセルスライダー
  3. スライドアイテム間のスペース調整
  4. スナップ
  5. カルーセルスライダー、中央から開始
  6. 縦型スライダー
  7. ブレイクポイントの設定 など

keen-slider ベーシック デモ

ナビゲーション デモ

スライダーのナビゲーションは、左右矢印とスライダー下のドットによる操作が用意されています。

どうやらサムネイル画像による操作は、ドキュメントに記載されていませんでした。
サムネイルによる操作も結構使うシーン多いですから、このタイプも是非欲しいところです。

デモの紹介は、今後も増えていくようなので追加されることを期待したいですね。

keen-slider ナビゲーション デモ

メディア デモ

フェードや画像の遅延読み込み、ズームアウトなどのスライドの切り替えが用意されています。

keen-slider メディア デモ

日付/時刻ピッカー デモ

iOSの日時ピッカーに基づいたデザインの日付・時間ピッカーが実装できます。
これはSlickやSwiperにはないものでした。

使い所がイマイチ?な気もしますが、もしこんな使い方したよ!ってあれば教えてください。

keen-slider 日付・時間ピッカー デモ

その他のデモ

その他自動再生スライダーやエンドレス、背景が回転するスライダーなどがあります。
この背景が回転するスライダーが印象的でした。

keen-slider.jsの使い方

使い方は、npm経由で簡単にインストールも可能ですが、
ここではnpmなど不慣れな人用にCDN経由での使用方法を記載しておきます。

CSS・JSライブラの読み込み

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css" />
<script src="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.js"></script>

JSで読込先の指定

var slider = new KeenSlider('#my-keen-slider')

HTMLの設置

<div id="my-keen-slider" class="keen-slider">
      <div class="keen-slider__slide">1</div>
      <div class="keen-slider__slide">2</div>
      <div class="keen-slider__slide">3</div>
</div>

npm経由でのインストールをしたい人は、こちらをご覧ください。
npm経由のインストール方法

keen-slider
The HTML touch slider carousel with the most native feeling.