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. Random Text Shuffle

    JavaScript

    シャッフルしながらテキストが表示される「Random Text Shuffle」

    Random Text Shuffleは文字をシャッフルしながらテキス…

  2. jQuery Seat Charts
  3. jQuery contextMenu plugin & polyfill
  4. jQuery Pit-scheduler v2.0
  5. Segment

    JavaScript

    SVG pathをアニメーションさせる軽量のスクリプト「Segment」

    SegmentはSVG pathをアニメーションさせる軽量のスクリプト…

  6. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

最近の記事

  1. cheero Smart USB Charger 48W CHE-320
  2. ブエノカフェ CM-200

アーカイブ

PAGE TOP