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

NO IMAGE

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

offbeatSlider

デモ

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

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

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

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

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

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

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

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

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives