no-image

JavaScript

シンプルなバナースライドショーを実装できる「jsslider」

jssliderはシンプルなバナースライドショーを実装できるjQueryプラグインです。バナーをスライドショーで次々に表示させたい場合に便利ですね。自動スライドにも対応し、オプションを用いることでスピード調節やエフェクトの設定も可能です。ナビゲーション付きなので操作性もシンプルで使いやすいです。

jsslider

デモ

デモではシンプルなバナースライダーが表示されていて、スライダー内の右下にはナビゲーションが設置されています。ナビゲーションから現在の位置をチェックできたり好きな位置へ移動することができるので、シンプルながらもとても実用性に優れています。

バナーは自動で次々にフェードでスライドしていくので、ユーザーの視線をグッと集めやすいですね。

オプションには、banItemClass、navItemClass、navWrapClass、navBgWrapClass、prevOneBtnClass、nextOneBtnClass、prevPageBtnClass、nextPageBtnClass、perpage、curClass、event、effect、speedといった項目が用意されています。ちなみに、エフェクト(effect)のデフォルト値はnoneになっていて、他にはfadeという値が用意されています。また、スピード(speed)のデフォルト値は5000になっています。

jsslider

no-image水平・垂直に対応したカルーセルスライドショー「jCarousel」前のページ

SVGによるトライアングルパターンを表示できる「jquery-svgTrianglePattern」次のページno-image

最近の記事

  1. ボヤージュブレンド
  2. 紫陽花とセミの抜けがら
  3. クラブハウスサンド 石窯カンパーニュ
PAGE TOP