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

   

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

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

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

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

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

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

特徴

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

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

設置方法

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

続いてHTMLの記述、

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

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

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

オプション例

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

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

詳しくは下記サイト等ご参考ください。

配布サイト

http://bqworks.com/slider-pro/
https://github.com/bqworks/slider-pro/

参考サイト

http://gimmicklog.main.jp/jquery/340/

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