Bara-Bones-Slider

JavaScript

優れたカスタマイズ性を有するjQueryスライダー「Bara-Bones-Slider」

Bara-Bones-Sliderは、優れたカスタマイズ性を有するイメージスライダーを実装することができるjQueryプラグインです。軽量ながらも、たくさんのオプションが用意されているので、自分好みにカスタマイズすることができます。

Bara-Bones-Slider

デモ

デモではデフォルトの設定から、オートプレイによるスライダー、ページネーション付き、トランジションによるフェードやブラインドなどのスライダーなど、さまざまなパターンのサンプルが用意されています。

各サンプルごとに具体的なコードの記述例も記載されているので、実装に関しても理解しやすいと思います。一般的なスライダーだけではなく、カルーセルとしても実装できるのが嬉しいですね。

HTMLのマークアップ、使い方ともにシンプルでわかりやすいです。オプションの数も豊富で、autoHeight、dynamicHeight、page、duration、easing、controls、controlsText、pager、pagerWrap、pageInfo、infoWrap、onDemand、placeholder、auto、timer、loop、loopTrans、transition、pauseOnHit、randomPlay、touch、touchoffsetなど、他にもいろんなオプション項目が用意されています。

ちなみに、デフォルト値の例をいくつか挙げると、durationが1000、easingがease、autoがfalse、timerが5000、loopがtrue、transitionがfadeです。transitionにはfadeの他にも、none、slide、slideVert、blindがあります。

また、easingの値もかなり種類があり、linear、ease-in、ease-out、ease-in-out、easeInQuad、easeInCubic、easeInQuart、easeInQuint、easeInSine、easeInExpo、easeInCircなど、他にもたくさんの値が用意されています。

かなり細かい部分までカスタマイズできるので、優れたカスタマイズ性を有したjQueryスライダーを探している人は、ぜひ「Bara-Bones-Slider」を使われてみてはいかがでしょうか?

Bara-Bones-Slider

Docked Link jQuery Plugin固定されたリンクを表示させられる「Docked Link jQuery Plugin」前のページ

美しいカラーパレッドを追加できる「Palette-js」次のページPalette-js

関連記事

  1. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  2. Nivo Zoom

    JavaScript

    Lightbox風に画像をズームして表示させるjQueryプラグイン「Nivo Zoom」

    Lightbox風に画像をズームして表示させるjQueryプラグイン「…

  3. no-image

    JavaScript

    要素ごとにスクロールできるjQueryプラグイン「snapScroll.js」

    snapScroll.jsは要素ごとにきりのいいところでスクロールされ…

  4. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  5. flatpickr

    JavaScript

    超軽量で使い方もカンタンな日付ピッカー「flatpickr」

    flatpickrはjQueryなどのライブラリに依存することなく動作…

  6. gliojs

    JavaScript

    viewportから離れた時にイベントをトリガーしてくれる「gliojs」

    gliojsは、ページを閲覧している時にマウスがviewport(表示…

最近の記事

  1. 桜と太陽
  2. ベルボン Mシリーズ
  3. ネック冷却ファン NRF10
  4. Kindle 8GBモデル
  5. プロテクティングクロス PC-E2

アーカイブ

PAGE TOP