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. no-image

    JavaScript

    シンプルなイメージスライダーとカルーセルを実装できる「SkySlider」

    SkySliderはシンプルで軽量、そしてレスポンシブにも対応したイメ…

  2. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

  3. jquery.simple-scroll-follow
  4. PIGNOSE-ParallaxSlider
  5. jQuery Flat Shadow

    JavaScript

    フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」

    フラットデザインのUIに影(シャドウ)をつけてくれるjQueryプラグ…

  6. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

最近の記事

  1. パーソナルパーティション
  2. 200-DGBG020
  3. Anker PowerPort 5-in-1 37.5W Hub

アーカイブ

PAGE TOP