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. Zoom Slider

    JavaScript

    ズーム機能を備えたシンプルなコンテンツスライダー「Zoom Slider」

    Zoom Sliderは奥行き感を演出したズーム機能を備えたシンプルな…

  2. Tabby

    JavaScript

    軽量でシンプルなタブメニューを実装できるjQueryプラグイン「Tabby」

    とても軽量でシンプルなタブメニューを実装できるjQueryプラグイン「…

  3. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  4. ScrollPress

    JavaScript

    スムーズなアニメーションのスクロールトップ実装「ScrollPress」

    ScrollPressは、スムーズなアニメーションによるスクロールトッ…

  5. Points Of Interest

    JavaScript

    各ポイントごとにクリックで詳細文を表示させるjQuery「Points Of Interest」

    Points Of Interestはサイト内に設置した各ポイントを…

  6. Grasp Mobile Progress Circle

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP