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. Image Tilt Effect

    JavaScript

    画像にチルトエフェクトをかけることができる「Image Tilt Effect」

    Image Tilt Effectは画像にチルトエフェクトをかけたちょ…

  2. BeefUp

    JavaScript

    多彩なカスタマイズができるjQueryアコーディオンプラグイン「BeefUp」

    BeefUpは多彩なカスタマイズができるレスポンシブに対応したjQue…

  3. Multipicker

    JavaScript

    要素を選択するときに直感的な操作を実現する「Multipicker」

    Multipickerは、日付や曜日、番号、その他さまざまな要素を選択…

  4. 4PXMMenu

    JavaScript

    滑らかなアニメーションでモバイルサイトに最適なメニュー実装「4PXMMenu」

    4PXMMenuはモバイルサイトに最適なメニューを実装することができる…

  5. Justified Gallery
  6. no-image

    JavaScript

    かっこいいニュース・バナースライドショー実装「jQuery News Slider」

    jQuery News Sliderは、かっこいいニュース・バナースラ…

最近の記事

  1. NIVEA MEN CREME
  2. チャイラテ
  3. ベーコンエッグアボカドトーストとゆずジンジャーアップル
  4. COMOLI ナッピングウールショーツ
  5. 川上庵(麻布十番)牡蠣天せいろ
PAGE TOP