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

no-imageレスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadate」前のページ

テキストに応じてアンダーラインが伸び縮みする「Magic Line Menu」次のページno-image

関連記事

  1. jQuery Tags Input

    JavaScript

    シンプルでお洒落なタグを入力することができるjQueryプラグイン「jQuery Tags Inpu…

    とても便利で面白いjQueryプラグインがあったのでご紹介します。シン…

  2. jTableScroll

    JavaScript

    ヘッダーとフッターを固定したままスクロール可能なテーブル「jTableScroll」

    jTableScrollはヘッダーとフッターを固定したままスクロール…

  3. Sticky Multi Header Scroll
  4. Checkify

    JavaScript

    軽量でカスタマイズ性も高いjQueryバリデーションプラグイン「Checkify」

    Checkifyは軽量でカスタマイズ性も高いバリデーション機能を実装で…

  5. Jquery Line Progress Bar
  6. jQuery.appear

    JavaScript

    ビューポート外のコンテンツ表示を防止できる「jQuery.appear」

    jQuery.appearは、元々は非表示となっているものや、ビューポ…

最近の記事

  1. ゴムの耳栓
  2. ライオンコーヒー(バニラマカダミア)
PAGE TOP