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. Maximum Characters limit exceeded warning
  2. iconate.js

    JavaScript

    アイコンをオシャレにアニメーションしながらtransformさせる「iconate.js」

    iconate.jsはアイコンをアニメーションさせながら別のアイコンへ…

  3. A simple DIY responsive image slideshow
  4. Responsive 3d Fold Scroll
  5. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

  6. Flex-Slider-jQuery

    JavaScript

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

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

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6
  5. iPad Air

アーカイブ

PAGE TOP