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

関連記事

  1. Shorten

    JavaScript

    長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

    Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれ…

  2. jQuery fullsizable
  3. no-image

    JavaScript

    依存関係のないタグ付け機能を実装できる「taggle.js」

    taggle.jsは依存関係のないタグ付け機能を実装できるのが特徴です…

  4. funnyText.js
  5. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

  6. JavaScript

    レスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」

    anoFlowというjQueryプラグインを使えば、レスポンシブなLi…

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる

アーカイブ

PAGE TOP