simpleSlideShow

JavaScript

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

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

simpleSlideShow

デモ

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

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

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

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

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

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

simpleSlideShow

Spotifyでクロスフェードさせる設定方法Spotifyで曲と曲の境目をDJっぽくクロスフェードさせる設定方法前のページ

カウンター付きのソーシャルシェアボタンを実装できる「jQuery Floating Social Share」次のページjQuery Floating Social Share

関連記事

  1. jquery-side-navi

    JavaScript

    サイドからスライドでナビゲーションを表示できる「jquery-side-navi」

    jquery-side-naviは、サイドからスライドでタブコンテンツ…

  2. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

  3. Relocator
  4. plainModal

    JavaScript

    カスタマイズ性が高いシンプルなモーダルウィンドウのjQueryプラグイン「plainModal」

    plainModalはシンプルでカスタマイズ性が高いモーダルウィンドウ…

  5. no-image
  6. no-image

    JavaScript

    タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」

    simplelightboxはレスポンシブ対応でタッチフレンドリーなl…

最近の記事

  1. JOK-350 WH
  2. 1460 COLLAR ウォータープルーフ 8ホールブーツ
  3. スターバックス ハウスブレンド

アーカイブ

PAGE TOP