jQuery Slideshow

JavaScript

シンプル・軽量・レスポンシブなスライダー実装「jQuery Slideshow」

jQuery Slideshowはシンプルで軽量、そしてレスポンシブにも対応したスライダーを実装することができるjQueryプラグインです。マークアップや使い方も簡単なほか、オプション設定もいろいろできるのでカスタマイズも手軽にできます。

jQuery Slideshow

jQuery Slideshowの実際のデモは以下のページから確認できます。

デモ

デモではブラウザ画面の横幅いっぱいに表示されたスライダーが設置されています。自動再生になっているので、一定の時間が過ぎると次のアイテムに自動でスライドされます。

左右には前後移動できる矢印ボタンが表示されているほか、スライダー下部にはナビゲーションも備わっています。

また、レスポンシブ対応なので、画面幅を縮小・拡大しても最適なサイズに可変するのもいいですね。PCのみならずスマホやタブレットなどでも快適にスライダーを楽しむことが可能です。

オプションではスライド時のスピードやディレイ、自動再生のオン・オフ、ナビゲーションの有無、幅、高さ、レスポンシブに対応させるかどうかなど、細かいセッティングができます。

具体的なオプション項目は、speed、delay、autoplay、navigation、pagination、width、height、direction、responsiveがあります。

デフォルト値は、speedが1000、delayが3000、autoplayがtrue、navigationがtrue、paginationがtrue、widthが100%、heightがauto、directionがright、responsiveがtrueです。

レスポンシブ対応でシンプル・軽量なスライダーを手軽に実装したい人は、ぜひ「jQuery Slideshow」を活用されてみてはいかがでしょうか。

jQuery Slideshow

bcralnit.jsテキストエリア(textarea)などで行番号を追加できるjQueryプラグイン「bcralnit.js」前のページ

フェード、スライド、水平、垂直などカスタマイズ性の高いスライダー「Prrple Slider」次のページNO IMAGE

関連記事

  1. jQuery-LightBox

    JavaScript

    軽量でモバイルフレンドリーなLightbox実装「jQuery-LightBox」

    jQuery-LightBoxは、軽量でレスポンシブにも対応したモバイ…

  2. Optiscroll

    JavaScript

    縦横に対応したカスタマイズ性に優れたモダンなスクロールバー「Optiscroll」

    Optiscrollは、軽量で高度に最適化されたカスタマイズ性に優れた…

  3. curtains.js

    JavaScript

    カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

    curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ…

  4. no-image

    JavaScript

    SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」

    donuttyはSVGによるドーナッツ状(円形)のチャートを実装できる…

  5. jQuery GoUp!

    JavaScript

    ページ上部にスクロール移動してくれる「jQuery GoUp!」

    jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプ…

  6. Jquery-Slider

    JavaScript

    水平の画像タイムラインを実装できる「Jquery-Slider」

    Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP