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. no-image
  2. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  3. Bootstrap Carousel Touch Slider with Text Animation
  4. pixelate.js
  5. Glide.js

    JavaScript

    軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」

    Glide.jsは軽量・フレキシブル・高速なJavaScript ES…

  6. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP