simpleSlideShow

JavaScript

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

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

simpleSlideShow

デモ

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

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

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

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

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

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

simpleSlideShow

関連記事

  1. Animated Heat Distortion Effects with WebGL

    JavaScript

    陽炎のような揺れを表現できる「Animated Heat Distortion Effects wi…

    夏の暑い日などによく見かける「陽炎」のようなエフェクトを実装することが…

  2. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  3. HR Navigation Responsive Menu
  4. jQuery LED

    JavaScript

    LEDディスプレイのようなカウントダウン・タイマー・時計を実装できる「jQuery LED」

    jQuery LEDは、LEDディスプレイで表示されるようなカウントダ…

  5. JavaScript

    画像にマウスオーバーするとズームして綺麗にエフェクトがかかるjQueryプラグイン「Swish」

    画像にマウスオーバーをするとズームして綺麗なオーバーレイのエフェクトが…

  6. Erge Drop Down Menu Control

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP