NO IMAGE

JavaScript

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

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

offbeatSlider

デモ

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

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

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

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

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

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

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

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

関連記事

  1. Image Gallery Threejs
  2. no-image

    JavaScript

    レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadat…

    pickadateはレスポンシブに対応したモバイルフレンドリーなデート…

  3. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2013年上半期に紹介したjQueryプラグイン50選まとめ

    気づいたらあっという間に2013年上半期が終わってしまいましたね。とい…

  4. JavaScript

    画像をボックス単位に分割してスライドさせていくjQueryプラグイン「Maskify Slider」…

    とてもお洒落なjQueryのイメージスライダーがあったのでご紹介します…

  5. Responsive Sidebar Navigation
  6. SmartPhoto.js

    JavaScript

    レスポンシブなイメージビューアを実装できる「SmartPhoto.js」

    SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージ…

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP