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

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

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

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

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

Contents

タッチ・スワイプが滑らかなスライダー keen-slider.js
keen-slider.jsの特徴
keen-slider.jsのデモ
keen-slider.jsの使い方

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

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

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

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

keen-slider.jsの特徴

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

keen-slider.jsのデモ

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

ベーシックデモ

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

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経由のインストール方法