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

サイト構築 -JavaScript

Post on:2020年7月8日

keen-sliderの特徴

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

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経由で簡単にインストールできます。

npm install keen-slider --save

1	npm install keen-slider --save

モジュールとして追加

import 'keen-slider/keen-slider.min.css'
import KeenSlider from 'keen-slider'

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

import 'keen-slider/keen-slider.min.css'

import KeenSlider from 'keen-slider'

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

HTML

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

<html>
  <head>
    <link rel="stylesheet" href="path/node_modules/keen-slider/keen-slider.min.css" />
  </head>
  <body>
    <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>
    <script src="path/node_modules/keen-slider/keen-slider.js"></script>
    <script>
      var slider = new KeenSlider('#my-keen-slider')
    </script>
  </body>
</html>

<html>

<head>

</head>

<body>

</div>

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

</script>

</body>

</html>

Reactのフックとして追加

import React from 'react'
import 'keen-slider/keen-slider.min.css'
import { useKeenSlider } from 'keen-slider/react'

export default () => {
  const [sliderRef, slider] = useKeenSlider()

  return (<div ref={sliderRef}>
    <div class="keen-slider__slide">1</div>
    <div class="keen-slider__slide">2</div>
    <div class="keen-slider__slide">3</div>
  </div>)
}