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」の紹介でした。

no-imageHTML要素を回転させれる「jquery-ui-rotatable」前のページ

レスポンシブ対応の軽量・シンプルなモーダル「Simple Modal」次のページSimple Modal

関連記事

  1. Brusher

    JavaScript

    インタラクティブな背景を実装できる「Brusher」

    Brusherはインタラクティブな背景を実装できる軽量なJavaScr…

  2. okzoom

    JavaScript

    レンズで拡大するように画像の細部をマウスオーバーでズームできる「okzoom」

    okzoomは画像細部をマウスオーバーでズームすることができるjQue…

  3. Navi.js

    JavaScript

    ナビゲーションとコンテンツが連動して切り替わるjQueryプラグイン「Navi.js」

    ナビゲーションとコンテンツが連動して切り替わる便利なjQueryプラグ…

  4. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

  5. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  6. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP