[JS]このスクリプト一つで、さまざまな用途に合わせたスライダーが実装できて便利 -Tiny Slider

スライダーとしてのあらゆる機能を備えた単体で動作する軽量のスクリプトを紹介します。シンプルなHTMLでスライダーを実装でき、ベーシックなスライダーからフルカスタマイズされたスライダーまで、簡単に実装できます。

Tiny Slider
Tiny Slider -GitHub

• Tiny Sliderの特徴
• Tiny Sliderのデモ
• Tiny Sliderの使い方

Tiny Sliderの特徴

• シンプルなHTMLで、高性能なスライダーを実装。
• 他のJavaScript, CSSへの依存は無し。
• さまざまなスライダーに対応。水平・垂直・自動再生など、カスタマイズも簡単。
• 矢印キー、ドラッグやタッチ操作にも対応。
• レスポンシブ対応、ブレイクポイントの設定も簡単。
• CSS3対応のすべてのモダンブラウザをサポート。
• 古いブラウザにはCSS2のフォールバックでサポート。

サポートブラウザ

• Firefox 8+
• Chrome 15+
• Safari 4+
• Opera 12.1+
• IE 8+

Tiny Sliderのデモ

デモではTiny Sliderで実装できるさまざまなスライダーを試すことができます。たくさんあるので、その中から一部を紹介します。

追記:
昨晩、デモページが更新されたようで、その際にエラーがでてしまっているようです。
19:00追記: デモが正常に動くようになりました。

Tiny Slider: Base

ベーシックなスライダー。

Tiny Slider: Fixedwidth

幅固定のスライダー。

Tiny Slider: Vertical

垂直型のスライダー。

Tiny Slider: Responsive

レスポンシブ用のブレイクポイントは自由に設定できます。

Tiny Slider: Mouse Drag

ドラッグ操作はスライドのちょうどいい位置に自動で調整されます。

Tiny Slider: Animation

回転やバウンドなど、アニメーションを組み合わせることもできます。

Tiny Slider: Customize

Tiny Sliderのさまざまなオプションを組み合わせて利用することも可能。

Tiny Sliderの使い方

Step 1: 外部ファイル

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

IE9未満に対応する場合は、「tiny-slider.helper.ie8.js」を加えます。

Step 2: HTML

スライダーのHTMLは基本的には2種類で、どちらを使用しても大丈夫です。
まずは、div要素を使った実装。コンテナには参照できるようにclassを与えます。

リストを使用して実装することも可能です。

Step 3: JavaScript

コンテナとなる要素（.my-slider）を指定し、スクリプトを実行します。