NO IMAGE

JavaScript

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

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

offbeatSlider

デモ

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

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

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

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

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

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

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

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

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

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

最近の記事

  1. 縦置きスタンド
  2. スマトラ
  3. さくらドーナツ
PAGE TOP