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. Slinky.js

    JavaScript

    上下にスクロールでコンテンツが開閉するjQueryプラグイン「Slinky.js」

    なかなか面白かったのでご紹介します。上下にスクロールするとコンテンツが…

  2. SPOILER ALERT!

    JavaScript

    画像やテキストにボカシを入れることができるjQueryプラグイン「SPOILER ALERT!」

    画像やテキストといった部分にボカシを入れることができるjQueryプラ…

  3. ScalableLightbox

    JavaScript

    ミニマルでレスポンシブに対応したLightbox風のjQueryプラグイン「ScalableLigh…

    ScalableLightboxはミニマルなデザインでレスポンシブに対…

  4. jQuery Hero Slider Plugin
  5. slider Menu

    JavaScript

    メニューリストをスライダーメニューにするjQueryプラグイン「slider Menu」

    slider Menuはメニューリストをスムーズにスライダーメニューに…

  6. Dynamic Table

    JavaScript

    スプレッドシートのようなテーブルを実装できるjQueryプラグイン「Dynamic Table」

    Dynamic Tableはスプレッドシートのような高機能なテーブルを…

最近の記事

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

アーカイブ

PAGE TOP