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

関連記事

  1. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

  2. BeefUp

    JavaScript

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

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

  3. TwentyTwenty

    JavaScript

    2枚の画像を見比べれるjQueryプラグイン「TwentyTwenty」

    TwentyTwentyは2枚の画像を見比べれる便利なjQueryプラ…

  4. plainModal

    JavaScript

    カスタマイズ性が高いシンプルなモーダルウィンドウのjQueryプラグイン「plainModal」

    plainModalはシンプルでカスタマイズ性が高いモーダルウィンドウ…

  5. raccordion

    JavaScript

    レスポンシブにも対応!アコーディオンのイメージスライダーを実装できるjQueryプラグイン「racc…

    レスポンシブにも対応しているjQueryプラグインのアコーディオンのイ…

  6. no-image

    JavaScript

    フラットでシンプルなカラーピッカー実装「Pickr」

    Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です…

最近の記事

  1. M360bt

アーカイブ

PAGE TOP