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. jQuery Panorama Viewer

    JavaScript

    パノラマビューを実装できるjQueryプラグイン「jQuery Panorama Viewer」

    jQuery Panorama Viewerはパノラマビューを実装する…

  2. no-image

    JavaScript

    コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

    Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせ…

  3. Justified Gallery
  4. jQuery googleslides
  5. jQuery Text Fade Delay
  6. jquery.peekABar

    JavaScript

    様々なカスタマイズができる便利な通知バー「jquery.peekABar」

    jquery.peekABarは様々なカスタマイズが可能な通知バー(通…

最近の記事

  1. CHA-SAJI
  2. SLE-19P
  3. Soundcore Ace A0
  4. Fire 7 タブレット

アーカイブ

PAGE TOP