no-image

JavaScript

Facebookのようなカルーセルスライダーを実装できる「jquery-carousel-slider」

jquery-carousel-sliderは、FacebookページにあるカルーセルスライダーのようなUIを実装できるjQueryプラグインです。カードのように均一に並べられているので、好きなコンテンツへ簡単にアクセスできます。たくさんあるアイテムは、左右の矢印ボタンから手軽にスライドして切り替えていくことが可能です。

JSONファイルからも追加できる

デモ

デモページには読み込み時に表示されているアイテム数が異なるサンプルが3つ用意されています。カルーセルスライダーにマウスオーバーすると、左右に矢印ボタンが表示されるので、ここから前後のアイテム群へ切り替えることができます。

サクサクと動作するのでストレスなく操作性も抜群です。デザインもカードを綺麗に並べているような感じなので、均一性や統一感がありとても見やすくなっています。

また、各サンプルにはJSコードによるセッティング例も記述されているので、こちらも参考になるかと思います。

オプションには、subject、cardw、cardh、cardn、margin、JSONといった項目が用意されています。カードの幅(cardw)や高さ(cardh)もここから手軽に変更できます。

ちなみに表示させるカード数はcardnという項目から設定できます。例えば、デモページの一番上にあるカルーセルスライダーは、cardnの値が7になっているので、7つのカードが表示された状態になっています。

そのほか、JSONファイルから画像、タイトル、ディスクリプションを追加させることもできます。

jquery-carousel-slider

関連記事

  1. Valiant 360

    JavaScript

    360度のパノラマ動画を実装できるビデオプレーヤー「Valiant 360」

    Valiant 360はブラウザ上で360度のパノラマ動画・写真を実装…

  2. JavaScript

    jQueryプラグインのレスポンシブなカルーセルのスライダー「Elastislide」を使ってみた

    jQueryプラグインで画面のサイズによってレイアウトを合わせてくれる…

  3. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  4. JavaScript

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

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

  5. jQuery touchSwipe Carousel
  6. Glide.js

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP