simpleSlideShow

JavaScript

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

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

simpleSlideShow

デモ

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

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

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

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

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

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

simpleSlideShow

関連記事

  1. Folder Preview Ideas

    JavaScript

    フォルダに楽しいホバーアニメーションをつける「Folder Preview Ideas」

    Folder Preview Ideasは、フォルダにさまざまな楽しい…

  2. JavaScript

    文字の半分をスタイルすることができるjQueryプラグイン「Splitchar」

    SplitcharというjQueryプラグインを使えば、文字の半分をス…

  3. Expanding Bar Navigation Concept
  4. megamenu.js

    JavaScript

    レスポンシブでスマートなメガメニューを実装できる「megamenu.js」

    megamenu.jsはjQueryを使ったレスポンシブでスマートなメ…

  5. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

  6. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

最近の記事

  1. cheero Smart USB Charger 48W CHE-320
  2. ブエノカフェ CM-200

アーカイブ

PAGE TOP