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. Fly to

    JavaScript

    カートに入れた際に飛んでいくエフェクトのjQueryプラグイン「Fly to」

    Fly toは商品をカートに入れた際にカートまで飛んでいくエフェクトを…

  2. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  3. How satisfied are you? Slider
  4. lory

    JavaScript

    タッチ対応でカルーセルにもできるミニマルなJS(jQuery)スライダー「lory」

    loryはタッチに対応したミニマルなデザインが特徴的なスライダーを実装…

  5. jQuery Scrollify

    JavaScript

    セクションごとにスクロールしてくれる「jQuery Scrollify」

    jQuery Scrollifyはセクションごとにスクロールしてくれる…

  6. JavaScript

    シンプルなアラートを表示させることができる「smoke.js」

    smoke.jsはシンプルでカッコいいアラートを表示させることができる…

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP