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. desoSlide

    JavaScript

    サムネイル付きのナビが素敵なスライダーを実装できるjQueryプラグイン「desoSlide」

    desoSlideというjQueryプラグインを使えば、サムネイル付き…

  2. Bootstrap Photo Gallery jQuery plugin
  3. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  4. no-image

    JavaScript

    ミニマルなイメージギャラリーを実装できる「Albery」

    Alberyはミニマルなイメージギャラリーを実装できるjQueryプラ…

  5. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

  6. Lena.js

    JavaScript

    多彩な画像処理ができるJSライブラリ「Lena.js」

    Lena.jsは多彩な画像処理を行うことができるJSライブラリです。セ…

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP