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

    JavaScript

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

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

  2. topbar

    JavaScript

    画面上部に美しいプログレスバーを表示できる「topbar」

    topbarは、ページ読み込み時に画面上部に美しいプログレスバーを表示…

  3. no-image

    JavaScript

    サラッとスライスで切り替わるスライダー実装「Slice Slider」

    Slice Sliderはサラッとスライスでシンプルに切り替わるスライ…

  4. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

  5. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

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

    JavaScript

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

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

最近の記事

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

Instagram始めました

Facebookページ

PAGE TOP