Jquery-Slider

JavaScript

水平の画像タイムラインを実装できる「Jquery-Slider」

Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴です。年ごとにシンプルな水平タイムラインを表示したいという人にはピッタリですね。任意の年をクリックすると、そのポイントまでスライドで移動します。

Jquery-Slider

デモ

デモでは水平に並ばられた画像によるタイムラインが用意されています。画面の下には年表があり、ここから見たい年をクリックすると、その場所までスライド移動します。年表では移動するだけではなく、現在表示されている位置も確認できるのでとても便利ですね。

画像・年表ともに横一列に並べられているのでとても見やすくなっています。時系列にタイムラインをシンプルに設置したい場合には最適なタイムラインになるのではないでしょうか?

オプションには、items、frequency、intermediate、init_sections、snap、label、sections、bar、bubble、decimal_placesといった項目が用意されています。各オプションのデフォルト値は、frequencyが0、intermediateが!0、init_sectionsが0、snapが!0、sectionsがtrue、barがfalse、bubbleがfalse、decimal_placesが2です。

Jquery-Slider

関連記事

  1. Magnific Popup

    JavaScript

    レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」

    レスポンシブに対応したLightbox風のjQueryプラグイン「Ma…

  2. BetterToggle

    JavaScript

    要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」…

    面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡…

  3. Tagify

    JavaScript

    Vanilla JSを用いた軽量のタグ入力機能を実装できる「Tagify」

    TagifyはVanilla JSを用いた軽量のタグ入力機能を実装でき…

  4. Animate Plus

    JavaScript

    CSS、SVGを使った多彩なアニメーションを実装できる「Animate Plus」

    Animate PlusはCSS、SVGを使った多彩なアニメーションを…

  5. popModal

    JavaScript

    6種類のモーダルウィンドウを実装できる「popModal」

    popModalは6種類のモーダルウィンドウを実装することができるjQ…

  6. GoogleSheets-HTMLImporter

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP