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. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーション動作中と停止中で処理を分ける:animatedと:not(:animat…

    jQueryでアニメーションが動作中の時だけ、またはアニメーションが停…

  2. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  3. Zoom Slider

    JavaScript

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

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

  4. Material ScrollTop Button
  5. floatThead

    JavaScript

    テーブルのヘッダーを固定できるjQueryプラグイン「floatThead」

    floatTheadはテーブルのヘッダーを固定することができるjQue…

  6. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

最近の記事

  1. WiMAX
  2. 甘柿
  3. 冬用のふとん
PAGE TOP