no-image

JavaScript

ミニマリスティックでフレキシブルなjQueryスライダー「Bore Bones Slider」

Bore Bones Sliderはミニマリスティックでフレキシブルなイメージスライダーを実装できるjQueryスライダープラグインです。ミニマルなスライダーながらも、多彩なオプションで優れたカスタマイズ性を有しています。

Bore Bones Slider

デモ

デモではシンプルなイメージスライダーが設置されており、一定時間が経過すると自動で次の画像へ切り替わるようになっています。フェードアニメーションでさりげなく切り替わるシンプルさは、いろんなサイトデザインに合わせやすそうですね。

また、デモはレスポンシブにも対応しています。画面を縮小していくと、それに合わせてスライダーのサイズも最適化されます。高さがアニメーションで変化していくのもおもしろいですね。

マークアップもsliderというクラス名を付与したdiv内にdivとimgを表示させる画像の分だけ並べていくだけなのでとてもシンプルに記述できます。

さらにオプションには様々な項目が用意されています。autoHeight、dynamicHeight、page、duration、easing、controls、controlsText、pager、pagerWrap、pagerText、onDemand、placeholder、auto、timer、loop、loopTrans、transition、pauseOnHit、randomPlay、touch、touchoffset……など、他にもいろんなオプションによるセッティングが可能です。

Bore Bones Slider

関連記事

  1. JavaScript

    jQuery Backstretchを使えば超簡単にブラウザサイズに合った背景画像を表示できる

    背景画像をブラウザのサイズに合わせて表示できるプラグイン「jQuery…

  2. Amigo Sorter Plugin

    JavaScript

    タッチ対応で直感的に並べ替えできるjQueryプラグイン「Amigo Sorter Plugin」

    Amigo Sorter Pluginは、タッチ対応で直感的にリスト項…

  3. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

  4. Dialogify

    JavaScript

    カスタマイズできるダイアログ・ライトボックスを作成できる「Dialogify」

    Dialogifyはカスタマイズできるダイアログやライトボックスなどを…

  5. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

  6. Maximum Characters limit exceeded warning

最近の記事

  1. レトロスペクティブ V2.0
  2. YAECA ワイドテーパードデニム 10-13WW
  3. ADR-3ML39シリーズ
  4. キュレル モイスチャーバーム

アーカイブ

PAGE TOP