[JS]jQuery無し、アニメーションを使ったスライダーを簡単に実装できる軽量スクリプト -slidr.js

リストや画像やdivなど、inlineでもinline-blockでもblock要素でも、アニメーションを使ったスライダーが簡単に実装できるスクリプトを紹介します。

スライドの方向も左右だけでなく、上下にも対応しており、フェードやキューブ状にスライドすることもできます。

slidr.js
slidr.js -GitHub

• slidr.jsのデモ
• slidr.jsの使い方

slidr.jsのデモ

デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは10が推奨でIE9は機能限定で動作します。

デモページ

デモでは6枚のパネルが逆L字状に配置されており、3種類のエフェクトでスライドできます。

Cube: 3Dのキューブ状にくるっと回転

Fade: フェードでパネルが切り替わります

コントローラーとパンくずの表示・非表示を切り替えることもできます。

コントローラーとパンくず

slidr.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして</body>の上あたりに記述します。

  ...
<script type="text/javascript" src="/path/to/slidr.min.js"></script>
</body>

Step 2: HTML

各パネルはinline, inline-block, blockのどの要素を使用しても構いません。ラッパーにidを付与するのを忘れずに。

<ul id="slidr-ul" style="display: inline">
  <li data-slidr="one">apple</li>
  <li data-slidr="two">banana</li>
  <li data-slidr="three">coconut</li>
</ul>

<div id="slidr-img" style="display: inline-block">
  <img data-slidr="one" src="/static/images/apple.png">
  <img data-slidr="two" src="/static/images/banana.png">
  <img data-slidr="three" src="/static/images/coconut.png">
</div>

<div id="slidr-div" style="dislay: block">
  <div data-slidr="one">apple</div>
  <div data-slidr="two">banana</div>
  <div data-slidr="three">coconut</div>
</div>

Step 3: JavaScript

ラッパーを指定し、スクリプトを実行します。

slidr.create('slidr-ul').start();

オプションも豊富に用意されています。

slidr.create('slidr-ul', {
  breadcrumbs: true,
  controls: 'corner',
  direction: 'vertical',
  fade: false,
  overflow: true,
  theme: '#222',
  timing: { 'cube': '0.5s ease-in' },
  transition: 'cube'
}).start();

breadcrumbs

パンくずの有無

controls

コントローラーの有無

direction

スライダーの方向

fade

フェード

overflow

オーバーフロー

theme

テーマ

timing

タイミング

transition

スライダーのエフェクト