simpleSlideShow

JavaScript

カスタマイズしやすいシンプル・軽量なスライドショー「simpleSlideShow」

simpleSlideShowは、シンプルで軽量なスライドショーを実装することができるjQueryプラグインです。パラメーターをセッティングできる項目がいくつか用意されているほか、CSSでの柔軟なスタイリングなどカスタマイズ性にも優れています。

simpleSlideShow

デモ

デモは角丸で表示された画像が、フェードアニメーションとともにスライドされていきます。前後移動できるナビゲーションなどは一切設置されておらず、とてもシンプルなスライダーに仕上がっています。

また、デモはレスポンシブにも対応しているので画面の横幅を縮小したり拡大したりしてもそれに合わせて最適化します。シンプルな機能ながらも、さまざまなデバイスで見やすく表示できるのがいいですね。

パラメーターには、time、transition、urlsの3つが用意されています。デフォルトの値は、timeが8、transitionが1です。urlsには、スライダーで表示させる画像を配列により記述します。ここに指定した画像がスライダーで表示され、ループします。

HTMLに直接imgタグや画像パスなどを記述する必要がないので、マークアップはとてもシンプルに記述できますね。画像を変更したい場合は、配列内の画像を変更するだけなので、管理もしやすくなりそうです。

機能的にはとてもシンプルですが、だからこそ軽量でカスタマイズもしやすいスライダーになっていると思います。

というわけで、レスポンシブに対応したシンプル・軽量なスライドショーを実装できるjQueryプラグインを探している人は、ぜひsimpleSlideShowを活用してみてはいかがでしょうか?

simpleSlideShow

関連記事

  1. no-image

    JavaScript

    マウスの動作に連動するシャドウエフェクト実装「Jquery Shadow Plugin」

    Jquery Shadow Pluginはマウスの動作に連動するシャド…

  2. no-image

    JavaScript

    クッキーバナーを手軽に作れるjQueryプラグイン「Cookie Banner JS」

    Cookie Banner JSは、Webサイト上に表示させるクッキー…

  3. no-image

    JavaScript

    トップに素早く戻れるボタンを実装できるjQueryプラグイン「TopButton」

    TopButtonはボタンをクリックするだけで画面トップに素早く戻れる…

  4. Zoomerang.js
  5. Zebra_Tooltips

    JavaScript

    シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

    Zebra_Tooltipsは軽量でシンプルなツールチップを実装できる…

  6. no-image

    JavaScript

    要素ごとにスクロールできるjQueryプラグイン「snapScroll.js」

    snapScroll.jsは要素ごとにきりのいいところでスクロールされ…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP