Blog

クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン

jQueryプラグインのスライダーの紹介は久しぶりになります。

いつもbxsliderを使っているのですが、それに勝るかもしれないプラグインを発見いたしましたので、
ご紹介させていただきます。

その名も「Slider Pro」公式サイトはこちらSlider Pro

サイト自体もけっこうかっこいいですね!

一応僕が試してみたDEMOもあります。

DEMO

簡単ですが、特徴としては、
・レスポンシブ対応
・スワイプ対応
・ブレークポイントの設定(画像自体を変更、サムネイルのサイズを変更等)
・高さ自動対応
・サムネイルの設定(縦横サイズ、位置、スワイプ設定)ができる
・フルスクリーンモードにできる
・上記からいろんなレイアウトに簡単に変更できる!

「Slider Pro」の使い方

まずは公式サイトからダウンロードをお願いします!

まずCSSを読み込み、

次にjavascriptを読み込みます。
headの中でもいいと思うのですが、の前がおすすめのようです。

次に,htmlを記述

class名つけたほうが良いですね。
ダウンロードしてきたcssに少しスタイルの指定がされています。

htmlをもっと簡単にしたい場合は、cssの設定を独自で変えればもっとスッキリできるかと思います。

そして最後に、jqueryを読み込む記述の後に以下の設定を記述すればOKです!

簡単です!

といってもこれはデフォルトの設定なので、サイトに合わせてのスライダーをつくろうとすると、
オプションを使う必要があります。

オプションは以下になります。

オプションだけでなく、メソッド、コールバック等もあります。

オプションで設定があるもので、htmlのclass名が特定のものにしないといけないものがありますのでそちらは下記をご覧ください。レイヤー、キャプション、サムネイルなど

ちなみにDEMOの設定は以下になります。

シンプルでかっこいいスライダーで割りと使い勝手もいいと思います!

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ