2016年1月27日 / 最終更新日時 : 2025年1月27日 GASS Webデザイン

スマホのフリックにも対応する次世代jQueryスライダー「Slider Pro」

2016年現在、jQueryスライダーはホントに沢山ありますが、その中でも秀逸なコンテンツスライダー「Slider Pro」に出会いましたのでご紹介します。

まずはデモをご覧ください。

サンプルのデモ・ダウンロード

PCでも左右にドラッグできるのがいいですね。スマホ時もフリックやスワイプに対応しています。CSSでページャーの形を変えたり、左右の矢印をオリジナルに変更したりしています。CSSをご参考にしてください。

つくりとして完全にマルチデバイスに対応しており、PC、タブレット、スマホなどレスポンシブデザインに対応したスライダーが簡単に設置できます。

特徴

特徴としては以下があげられます。幅広い要件に対応できそうです。

・レスポンシブデザインに対応
・スマホのスワイプやタッチに対応
・IEでも動作可能（IE8以上）
・フルスクリーンモードも可能
・ブレイクポイントの設定が可能
・極めてスムーズで演出がかっこいい
・さまざまなレイアウトにも対応できる

設置方法

上部で、「slider-pro.min.css」を読込

<link rel="stylesheet" type="text/css" href="css/slider-pro.min.css">

1	<link rel="stylesheet" type="text/css" href="css/slider-pro.min.css">

続いてHTMLの記述、

<div id="slider-pro" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide"><img class="sp-image" src="img/img01.jpg"></div>
<div class="sp-slide"><img class="sp-image" src="img/img02.jpg"></div>
<div class="sp-slide"><img class="sp-image" src="img/img03.jpg"></div>
</div>
</div>

</div>

最後にjQuery本体と「jquery.sliderPro.min.js」を読込

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.sliderPro.min.js"></script>

1 2	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/jquery.sliderPro.min.js"></script>

そして設定を記述します。

<script type="text/javascript">
$( document ).ready(function( $ ) {
$( '#slider-pro' ).sliderPro({
buttons: true, //スライダーのページャを表示する
startSlide: 0, //最初のスライドを指定する
arrows: true, //左右の矢印ボタンを表示する
width: '100%', //横幅を設定する
height: 500, //高さを設定する
autoplay: true, //自動再生の設定
loop: true, //スライドをループさせる設定
visibleSize: '100%', //前後のスライドを表示するかの設定
forceSize: 'fullWidth' //スライダーの幅をブラウザ幅に設定する
});
});
</script>

$( document ).ready(function( $ ) {

$( '#slider-pro' ).sliderPro({

buttons: true, //スライダーのページャを表示する

startSlide: 0, //最初のスライドを指定する

arrows: true, //左右の矢印ボタンを表示する

width: '100%', //横幅を設定する

height: 500, //高さを設定する

autoplay: true, //自動再生の設定

loop: true, //スライドをループさせる設定

visibleSize: '100%', //前後のスライドを表示するかの設定

forceSize: 'fullWidth' //スライダーの幅をブラウザ幅に設定する

});

</script>

JSはヘッダで読み込んでもOKだと思います。

オプション例

豊富なオプションが用意されています。

スライダーのページャを表示する【buttons: true 】
最初のスライドを指定する【startSlide: 0 】
左右の矢印ボタンを表示する【arrows: true 】
横幅を設定する【width: 100% 】
高さを設定する【height: 500 】
自動再生の設定【autoplay: true 】
スライドをループさせる設定【loop: true 】
前後のスライドを表示するかの設定【visibleSize: 100% 】
スライダーの幅をブラウザ幅100%に設定する【forceSize: fullWidth 】