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. Toolgif

    JavaScript

    GIFアニメーションによるツールチップを実装できる「Toolgif」

    ToolgifはGIFアニメーションを活用したツールチップを実装するこ…

  2. Flex-box Gallery

    JavaScript

    ランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」

    Flex-box Galleryは、ランダムサイズによる画像たちをかっ…

  3. Footnoted

    JavaScript

    脚注(注釈)を入れたい時に役立つjQueryプラグイン「Footnoted」

    FootnotedというjQueryプラグインは文章の中に脚注(注釈)…

  4. no-image

    JavaScript

    ウィークデイ(週)のオプションを作成できる「jquery-weekdays」

    jquery-weekdaysはウィークデイ(週)のオプションを作成で…

  5. Switchery

    JavaScript

    チェックボックスをiOS7のようなスタイルにしてくれるjQueryプラグイン「Switchery」

    SwitcheryというjQueryプラグインを使えば、チェックボック…

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP