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

関連記事

  1. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

  2. no-image
  3. Clock Timepicker Plugin for jQuery
  4. JavaScript

    チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js…

    指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQ…

  5. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

  6. JavaScript

    jQueryプラグインのレスポンシブなカルーセルのスライダー「Elastislide」を使ってみた

    jQueryプラグインで画面のサイズによってレイアウトを合わせてくれる…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP