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. Greedy Navigation

    JavaScript

    レスポンシブ対応でメニューのアイテム数がわかりやすい「Greedy Navigation」

    Greedy Navigationはレスポンシブ対応でメニューのアイテ…

  2. Reshader

    JavaScript

    カラーの濃淡を得ることができるJavaScriptライブラリ「Reshader」

    Reshaderは、カラーの濃淡を得ることができる便利なJavaScr…

  3. jQuery Flip-Quote
  4. Schedule Template

    JavaScript

    シンプルなスケジュール表を実装する「Schedule Template」

    スッキリしたデザインのシンプルなスケジュールテンプレートを実装するため…

  5. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  6. JavaScript

    シンプルな構成で簡単に実装することができるツールチップ「jQuery PowerTip」

    とてもシンプルな構成で簡単に実装することができるjQueryプラグイン…

最近の記事

  1. RF85mm F2 MACRO IS STM
  2. Anker PowerWave Pad Alloy
  3. Anker Bolder LC30
  4. BG-R10

アーカイブ

PAGE TOP