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

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

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

  2. JQuery lightSlider

    JavaScript

    軽量でレスポンシブなサムネイルナビ付きのスライダー「JQuery lightSlider」

    JQuery lightSliderは軽量でレスポンシブに対応したサム…

  3. AOS

    JavaScript

    スクロールに合わせていろんなアニメーションで表示できる「AOS」

    AOSはスクロールに合わせてフェードやフリップ、ズームなどのアニメーシ…

  4. TOAST UI Chart

    JavaScript

    多彩なチャートを描画できる「TOAST UI Chart」

    TOAST UI Chartは多彩なチャートをWebページに描画できる…

  5. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

  6. JavaScript

    ホバーすると中心から円形メニューが表示される「jQuery Wheel Menu」

    ホバーするとその地点を中心にして円形メニューが表示されるプラグイン「j…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP