no-image

JavaScript

シンプルなイメージカルーセルを実装できる「Boishakh carousel」

Boishakh carouselはシンプルなイメージカルーセルを実装できるjQueryカルーセルプラグインです。マークアップ・使い方ともに簡単で手軽に実装できます。表示する画像数やprev/nextのテキスト設定などオプションもいろいろあるのでカスタマイズ性も備えています。

Boishakh carousel

デモ

デモでは2枚の画像が横に並べられていて、画面の両端には前後移動できるprev/nextボタンが設置されています。ボタンのテキストはBefore/Afterで、これはデフォルトのオプション設定によるものです。ボタンをクリックすることで画像を一枚ずつスライド移動させることができるほか、画像をドラッグすることでスライド移動させることも可能です。シンプルな操作性でとても使いやすいイメージカルーセルになっています。

オプションには、items、itemsBigTablet、itemsOnTablet、itemsOnMobile、margin、pauseOnHover、autoStructure、background、prev、nextが用意されています。各項目のデフォルト値は、itemsが2、itemsBigTabletが3、itemsOnTabletが2、itemsOnMobileが3、marginが2、pauseOnHoverがtrue、autoStructureがtrue、backgroundが’#ffffff”、prevが’Before’、nextが’After’です。

というわけで、シンプルなイメージカルーセルを実装できる「Boishakh carousel」の紹介でした。

関連記事

  1. FilmRoll

    JavaScript

    中央に来た項目に焦点を当てるカルーセルを実装できるjQueryプラグイン「FilmRoll」

    FilmRollというjQueryプラグインを使えば中央に来た項目に焦…

  2. Switchery

    JavaScript

    チェックボックスをiOS7のようなスタイルにしてくれるjQueryプラグイン「Switchery」

    SwitcheryというjQueryプラグインを使えば、チェックボック…

  3. tingle.js

    JavaScript

    シンプルで手軽に実装できるモーダルウィンドウ「tingle.js」

    tingle.jsは、シンプルなモーダルウィンドウを実装できるスクリプ…

  4. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

  5. JavaScript

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

  6. JavaScript

    レンガ風に要素を綺麗に並べてグリッドレイアウトが作れる「The Wookmark jQuery pl…

    Pinterestのように高さの異なる要素をレンガ風に綺麗に並べて、簡…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP