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

    JavaScript

    コンテンツを自動でスクロールしてくれるjQueryプラグイン「autoscroll.js」

    autoscroll.jsはwebページ内のコンテンツを自動でスクロー…

  2. Shine

    JavaScript

    ダイナミック(動的)で美しいシャドウを実装できるJSライブラリ「Shine」

    ShineというJavaScriptライブラリが素敵だったのでメモがて…

  3. AniX

    JavaScript

    優れたパフォーマンスと互換性を備えたアニメーションライブラリ「AniX」

    AniXは優れたパフォーマンスと互換性を備えた軽量のアニメーションライ…

  4. no-image

    JavaScript

    オシャレなスクロールエフェクトを実装できる「jQuery Smoove」

    jQuery Smooveは、オシャレなスクロールエフェクトを実装する…

  5. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

  6. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

最近の記事

  1. 16インチMacBook Pro
  2. レトロスペクティブ V2.0
  3. YAECA ワイドテーパードデニム 10-13WW

アーカイブ

PAGE TOP