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. no-image

    JavaScript

    縦スクロールによるフォトギャラリー実装「Simple Scroll Gallery」

    Simple Scroll Galleryは縦スクロールによるかっこい…

  2. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  3. ContentTools

    JavaScript

    画面内でそのまま編集できるWYSIWYGエディタ「ContentTools」

    ContentToolsは画面内でそのままコンテンツを編集できるWYS…

  4. 10のjQueryスニペット

    JavaScript

    Webデザイナーが知っておくべき10のjQueryスニペット

    すべてのWebデザイナーが知っておくべき10のjQueryスニペットが…

  5. overhang.jp

    JavaScript

    シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

    overhang.jsは、通知バーを実装するためのjQueryプラグイ…

  6. JavaScript

    360度画像を回転させるjQueryプラグイン10

    画像を360度回転させて見せることができる素敵なjQueryプラグイン…

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP