Simple jQuery Slider

JavaScript

シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

シンプルなスライダーを実装できる「Simple jQuery Slider」をご紹介します。ナビ付きのスライダーで、縦方向にスライドしていきます。使い方もとても簡単なので、1つの参考として覚えておきたいですね。

Simple jQuery Slider

Simple jQuery Slider

デモでは単語が1つずつ縦にスライドされていきます。一連の流れで見ると一つの文章になっています。ちなみにHTMLの記述はこんな感じです。

<div class="slide-wrap">
    <div class="slide-mask">
        <ul class="slide-group">
            <li class="slide">sample1</li>
            <li class="slide">sample2</li>
            <li class="slide">sample3</li>
            <!-- 中略 -->
        </ul>
    </div>

    <div class="slide-nav">
        <ul>
            <li class="bullet"></li>
            <li class="bullet"></li>
            <li class="bullet"></li>
            <!-- 中略 -->
        </ul>
    </div>
</div>

とてもシンプルで分かりやすいですね。slide-groupのリストにスライドさせるコンテンツを記述していきます。また、slide-navの部分で現在の位置を示すナビを表示させることができます。

CSSを設定することでデザインのカスタマイズなんかもできたりするので、シンプルなスライダーを実装したい方は是非チェックしてみてはいかがでしょうか。

NavSyncナビゲーションとコンテンツが連動するjQueryプラグイン「NavSync」前のページ

長いメニューもスクロールで表示できる「Solution for Long Drop Down Items」次のページSolution for Long Drop Down Items

関連記事

  1. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  2. SimpleCalculadora

    JavaScript

    シンプルでカスタマイズもできる電卓「SimpleCalculadora」

    SimpleCalculadoraはシンプルでCSS、オプションなどで…

  3. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  4. reveal-it.js

    JavaScript

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

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

  5. paroller.js

    JavaScript

    垂直・水平の動きに対応したパララックス効果を実装できる「paroller.js」

    paroller.jsは垂直・水平方向の動きに対応したパララックス効果…

  6. jQuery Quick Modal

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP