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. JavaScript

    ボタンやアイコンに素敵なクリックエフェクトを実装できる「Waves」

    ボタンやアイコンに素敵なクリックエフェクトを実装することができる「Wa…

  2. chalk-animation

    JavaScript

    カラフルなアニメーションを実装できる「chalk-animation」

    chalk-animationはカラフルなアニメーションによるテキスト…

  3. slider Menu

    JavaScript

    メニューリストをスライダーメニューにするjQueryプラグイン「slider Menu」

    slider Menuはメニューリストをスムーズにスライダーメニューに…

  4. jquery.horizonScroll.js
  5. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  6. jQuery Stick ‘em

    JavaScript

    スクロール時にその場所のコンテンツに応じたサイドバーが追従する「jQuery Stick ‘em」

    ちょっと使いどころがありそうなプラグインだったので使い方をメモしときま…

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP