[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider

クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。

Sudo Slider jQuery Plugin
デモページ

Sudo Sliderの主な特長

• リスト要素で簡単にスライダーを実装。
• AJAXで画像やHTMLをロード。
• スクリプトのオフ時でもコンテンツが可能。
• マルチプルなスライダーにも対応。
• 標準的なスライドからフェードまで多彩な表示を用意。
• 各パネルへの直接リンクが可能（ブックマーク可）、ブラウザの「前へ」「次へ」をサポート。
• パネル内は画像、テキスト、動画、フォームなどさまざまなHTMLコンテンツを表示可能。
• 自動再生でスライドショーも可能。
• ループ再生も可能。
• セットアップは簡単で、カスタマイズも簡単。
• IE6+, Fx, Chrome, Safari, Opなど主要ブラウザのほとんどに対応。
• 容量はわずか10KB。

Sudo Sliderの実装

実装も簡単です。
デモの「Default」のコンテンツスライダーの実装を紹介します。
デモページ

左右のアローでスライドする「Default」です。

HTML

各パネルをリスト要素で配置します。

<div id="slider" class="slider" >
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>

JavaScript

jquery.jsと当スクリプトを外部ファイルで指定し、下記のスクリプトを記述します。

$(document).ready(function(){
    $("#slider").sudoSlider();
});