NO IMAGE

JavaScript

レスポンシブ対応のスタイリッシュなスライドショー実装「offbeatSlider」

offbeatSliderはレスポンシブに対応したアニメーション付きのスタイリッシュなスライドショーを実装することができるjQueryプラグインです。フェードによるさりげないアニメーションに加え、ナビゲーションやページネーションも備えています。

offbeatSlider

デモ

デモではデフォルトスライダー、テキストオンリーのスライダー、画像 + ディスクリプションのスライダーの3つのサンプルが設置されています。

デフォルトのスライダーでは、左右に前後移動できる矢印とドットによるナビゲーションが表示されています。スタイリッシュなフェードアニメーションで画像が切り替わります。

テキストオンリーのスライダーも設置されているので、画像だけではなくテキストベースのスライダーを表示させたい人にもピッタリです。

もちろん、テキストと画像を同じスライダー内に組み込むことも可能です。実際、テキストオンリーと書かれたデモでも、中には画像が混ざっています。

また、デモはレスポンシブにも対応しているので、PCからの閲覧以外にもスマホやタブレットでも見やすいサイズにフィットするのがいいですね。

オプションには、animate、duration、easingなどといった項目が用意されています。その他、前後移動させる矢印アイコンもHTMLコードを変えることで他の種類のものを表示させることができます。

具体的なコードは冒頭のリンク先のページに載っているので、気になる方はぜひチェックしてみてください。

というわけで、スタイリッシュなフェードアニメーションによるレスポンシブ対応のスライダーを実装できる「offbeatSlider」のご紹介でした。

ssi-modalフレキシブルでパワフルなモーダルウィンドウを実装できる「ssi-modal」前のページ

スムーズなアニメーションのスクロールトップ実装「ScrollPress」次のページScrollPress

関連記事

  1. ViewBox

    JavaScript

    レスポンシブに対応したLightbox風のイメージギャラリー「ViewBox」

    ViewBoxはレスポンシブに対応したLightbox風のイメージギャ…

  2. jquery.horizonScroll.js
  3. no-image

    JavaScript

    ダイナミックな自動スライドショーを実装できる「CSS + jQuery Gallery」

    CSS + jQuery Galleryはダイナミックでかっこいい自動…

  4. no-image

    JavaScript

    水平・垂直に対応したカルーセルスライドショー「jCarousel」

    jCarouselは水平・垂直に対応したカルーセルスライドショーを実装…

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP