[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop

Post on:2015年9月1日

スマホやタブレットで快適に動作し、プログレッシブエンハンスメントを取り入れて実装されたスライダーのスクリプトを紹介します。

HTMLは非常にシンプルで、JavaScriptは最小限、jQueryなど他スクリプトの依存無しの超軽量スクリプトです。

サイトのキャプチャ

wallop
wallop -GitHub

wallopの特徴

  • モバイルファースト
  • プログレッシブエンハンスメント
  • アニメーションは軽量のCSSで
  • JavaScriptは最低限で実装
  • フレキシブル&スケーラブル
  • カスタムイベントとAPIが利用可能
  • 超軽量4KB(minified)
  • MITライセンス

wallopのデモ

デモではアニメーション無しのBasicをはじめ、Scale, Foldなどアニメーションで切り換えるスライダーを楽しめます。
iPad, iPodなどでも非常に快適に動作しました。

まずは、アニメーション無しのBasic。

See the Pen basic by Pedro (@peduarte) on CodePen.

切替時のアニメーションもさまざまなものが用意されています。
Scaleはパネルのサイズを変更しながら、切り換え。

See the Pen animation – scale by Pedro (@peduarte) on CodePen.

Foldは、パネルを折り畳むように。

See the Pen animation – fold by Pedro (@peduarte) on CodePen.

アニメーションは他にも、slide, fade, rotateなどが利用できます。

wallopの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。

<head>
  <link rel="stylesheet" href="path/to/wallop.css">
</head>
<body>
  ...
  コンテンツ
  ...
  <script src="path/to/Wallop.min.js"></script>
</body>

アニメーション（scale, foldなど）を利用する時は、アニメーション用のCSSを加えます。

<head>
  <link rel="stylesheet" href="path/to/wallop.css">
  <link rel="stylesheet" href="path/to/wallop-animation.css">
</head>

Step 2: HTML

スライダーの各パネルをdiv要素で内包し、パネル群とボタンをdiv要素で内包します。

<div class="Wallop">
  <div class="Wallop-list">
    <div class="Wallop-item">…</div>
    <div class="Wallop-item">…</div>
    <div class="Wallop-item">…</div>
    <div class="Wallop-item">…</div>
    <div class="Wallop-item">…</div>
  </div>
  <button class="Wallop-buttonPrevious">Previous</button>
  <button class="Wallop-buttonNext">Next</button>
</div>

アニメーションを利用する時は、classを加えます。

<div class="Wallop Wallop--slide">
  ...
</div>

Step 3: JavaScript

パネル群とボタンを内包しているdiv要素を指定し、スクリプトを実行します。

<script>
  var wallopEl = document.querySelector('.Wallop');
  var slider = new Wallop(wallopEl);
</script>

sponsors

top of page

©2024 coliss