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

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

デモのキャプチャ

Sudo Slider jQuery Plugin
デモページ

Sudo Sliderの主な特長

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

Sudo Sliderの実装

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

デモのキャプチャ

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

HTML

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

JavaScript

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

sponsors

top of page

©2018 coliss