JavaScript

レスポンシブやスワイプ対応で完成度の高いスライダーのjQueryプラグイン「Slider Pro」

Slider Proはレスポンシブやタッチ・スワイプに対応したスライダーを実装することができるjQueryプラグインです。完成度も高く便利で役立つ機能が満載です。サムネイル画像もつけることができたりと、いくつかのパターンがあるのでこれからスライダーを実装したいという方は、チェックしておきたいところです。

[ads_center]

Slider Proの使い方

Slider Proのデモは以下になります。

Slider Pro

デモ

Slider Proの大まかな特徴としては以下のようなものがあります。

  • レスポンシブ
  • タッチ、スワイプ
  • 無限スクロール
  • カルーセルレイアウト
  • サムネイル設定
  • フルスクリーンのサポート
  • ブレイクポイント設定

使い方は、まずjQueryとプラグインファイルをhead内に読み込みます。

<link rel="stylesheet" href="dist/css/slider-pro.min.css"/>
<script src="libs/js/jquery-1.11.0.min.js"></script>
<script src="dist/js/jquery.sliderPro.min.js"></script>

続いてHTMLをマークアップしていきます。

<div class="slider-pro" id="my-slider">
    <div class="sp-slides">
        <!-- Slide 1 -->
        <div class="sp-slide">
            <img class="sp-image" src="sample1.jpg"/>
        </div>

        <!-- Slide 2 -->
        <div class="sp-slide">
            <img class="sp-image" src="sample2.jpg"/>
        </div>

        <!-- Slide 3 -->
        <div class="sp-slide">
            <img class="sp-image" src="sample3.jpg"/>
        </div>
    </div>
</div>

あとはSlider Proを呼び出してあげればOKです。

jQuery(document).ready(function($) {
    $('#my-slider').sliderPro();
});

オプションもたくさん用意されているので、カスタマイズや細かい調整もしやすそうですね。

Slider Pro

レスポンシブ対応のカッコイイLightbox風jQueryプラグイン「Lightcase」前のページ

選択したテキストをツイートできるWordPressプラグイン「Quote Tweet」次のページQuote Tweet

関連記事

  1. Dialogify

    JavaScript

    カスタマイズできるダイアログ・ライトボックスを作成できる「Dialogify」

    Dialogifyはカスタマイズできるダイアログやライトボックスなどを…

  2. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  3. no-image

    JavaScript

    インタラクティブなツリー機能を実装できる「jstree」

    jstreeはインタラクティブなツリー機能を実装できるjQueryプラ…

  4. no-image

    JavaScript

    シンプルでベーシックなJavaScriptによるlightbox実装「halkaBox.js」

    halkaBox.jsは、シンプルでベーシックなJavaScriptに…

  5. jQuery gantt

    JavaScript

    軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

    jQuery ganttは、軽量でシンプルなガントチャートを実装するこ…

  6. no-image

    JavaScript

    円形に広がるメニュー実装「expanding action button」

    expanding action buttonは円形に広がるメニューを…

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP