bl6.jp

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

[ads_center]

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();
});

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

高機能なjQueryスライダーを実装したい時は、有力な選択肢の1つになりそうです。

Slider Pro