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. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  2. JavaScript

    レスポンシブやスワイプ対応で完成度の高いスライダーのjQueryプラグイン「Slider Pro」

    Slider Proはレスポンシブやタッチ・スワイプに対応したスライダ…

  3. Vertical Fixed Navigation #2
  4. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

  5. respontent

    JavaScript

    様々なコンテンツをレスポンシブにしてくれるjQueryプラグイン「respontent」

    respontentというjQueryプラグインを使えば、画像・You…

  6. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

最近の記事

  1. すしざんまい
  2. 蒼龍唐玉堂 特製牛バラ担々麺
  3. サーモンアボカドサラダラップとドリップ
  4. 猿田彦フレンチ
  5. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて

アーカイブ

PAGE TOP