no-image

JavaScript

スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

bsc-sliderは、シンプルでスタイリッシュなスライダーを実装することができるjQueryプラグインです。実用的なオプションもいろいろ揃っているほか、多彩なアニメーションエフェクトが用意されています。

bsc-slider

bsc-slider

デモではフェードで切り替わる優雅なスライダーが設置されています。複雑な機能や装飾がなく、とてもスタイリッシュな印象です。

マークアップ、使い方ともにとてもシンプルなので、簡単に実装することができます。

主なオプションは、autoplay、navigation、duration、effect、effect_speed、easing、heightです。オプションから、自動再生のオン・オフやナビゲーションの有無、エフェクトの設定やエフェクトスピードの調節などを手軽にカスタマイズできるのが便利ですね。

  • 0:None
  • 1:fade
  • 2:Slide Over to Top
  • 3:Slide Over to Right
  • 4:Slide Over to Bottom
  • 5:Slide Over to Left
  • 6:Slide to Right
  • 7:Slide to Left
  • 8:Slide to Top
  • 9:Slide to Bottom
  • 10:Slide Remove to Right
  • 11:Slide Remove to Left
  • 12:Slide Remove to Top
  • 13:Slide Remove to Bottom
  • 14:Parallax to Right
  • 15:Parallax to Left
  • 16:Parallax to Top
  • 17:Parallax to Bottom

シンプルながらも、このように豊富なエフェクトが用意されているのが魅力的ですね。スタイリッシュで手軽に実装できるスライダーを探している人は、ぜひ「bsc-slider」をチェックしてみてください。

star-rating-svgカスタマイズ性に優れたレーティング(星評価)実装「star-rating-svg」前のページ

チェックボックスをアニメーショントグルにする「jquery-simpletoggler」次のページno-image

関連記事

  1. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン19選のまとめ 2012/04 – 2012/0…

    2012年4月〜2012月7月までの当ブログで紹介したjQueryプラ…

  2. JavaScript

    リストなど複数の要素をランダムにフェードで表示していくjQueryプラグイン「champagne.j…

    どこかで使う機会がありそうな感じのjQueryプラグイン「champa…

  3. number-divider.js

    JavaScript

    数字を分割できるjQueryプラグイン「number-divider.js」

    number-divider.jsは数字を分割させることができるjQu…

  4. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  5. CoutUpCircle

    JavaScript

    カウントアップしてくれるjQueryプラグイン「CoutUpCircle」

    CoutUpCircleは目標に指定した数までカウントアップしてくれる…

  6. JavaScript

    シンプルで使いやすいベーシックなスライドショーを実装できるjQueryプラグイン「Basic jQu…

    jQueryスライダーのネタが多いですが、今日もまたスライダーのプラグ…

最近の記事

  1. COMOLI 和紙コットンリストバンド
  2. スターバックス インドネシア アチェ
  3. ベーコンとほうれん草のキッシュ
  4. サンクラフト ポテトング

アーカイブ

PAGE TOP