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. Macy.js

    JavaScript

    軽量なグリッドレイアウトを実装できるJSライブラリ「Macy.js」

    Macy.jsは軽量なグリッドレイアウトを実装することができる便利なJ…

  2. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  3. no-image

    JavaScript

    高性能なイメージビューアを実装できる「PhotoViewer」

    PhotoViewerは高性能なイメージビューアを実装できるJSプラグ…

  4. Square Menu
  5. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  6. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP