NO IMAGE

JavaScript

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

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

offbeatSlider

デモ

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

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

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

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

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

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

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

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

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

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

関連記事

  1. jQuery-Simple-MobileMenu
  2. JavaScript

    2つの異なるスクロール動作が印象的なjQueryプラグイン「multiscroll.js」

    multiscroll.jsというおもしろいjQueryプラグインがあ…

  3. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

  4. JavaScript

    立体的なナビゲーション表示を実装することができるjQueryプラグイン「Box Lid」

    立体的なナビゲーション表示を実装できるjQueryプラグイン「Box …

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのif文を使ってタグやクラス名によって条件分岐するやり方

    jQueryで普通にif文を使った条件分岐のやり方です。指定したタグや…

  6. Responsive 3d Fold Scroll

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP