bl6.jp

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

Simple jQuery Slider

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