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

ARIA TOOLTIPWAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」前のページ

スクロールでナビゲーションバーが移動する「Sticky Slider Navigation(Responsive)」次のページSticky Slider Navigation(Responsive)

最近の記事

  1. スマトラ
  2. さくらドーナツ
  3. 紙のコーヒーフィルター
  4. PS5とFF7リメイクと鉄拳8
PAGE TOP