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

    JavaScript

    Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「…

    Google画像検索のようなアニメーションを実装することができるjQu…

  2. Stretchy Navigation

    JavaScript

    ナビゲーションメニューが伸び縮みする「Stretchy Navigation」

    Stretchy Navigationはクリック、タップをすることで伸…

  3. Timeline

    JavaScript

    水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」

    Timelineは水平・垂直に対応したVanilla JSを使ったタイ…

  4. No Vacancy

    JavaScript

    ネオンサインのようなエフェクトを実装できるjQueryプラグイン「No Vacancy」

    テキストにネオンサインのようなエフェクトを実装することができるjQue…

  5. crossfade.js

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

  6. rpage

    JavaScript

    Bootstrapを使ったレスポンシブなページネーション「rpage」

    rpageはBootstrapを使ったレスポンシブに対応したページネー…

最近の記事

  1. 紫陽花
  2. 生ハム&モッツァレラチーズ サラダラップ
  3. コガネムシ
  4. ショルダーハム&5種の野菜サンドイッチ
PAGE TOP