2013/10/09
商品詳細で使えそうな3D jQueryプラグイン
商品詳細で使えそうな3DのjQueryプラグインを試してみた。
設置方法は以下
js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $( window ).load(function() { $('#slider').impulseslider({ height: 300, width: 480, depth: 329, perspective: 2800, pauseTime: 3000, transitionDuration: 1000, transitionEffect: "ease-in-out", autostart: true, rightSelector: ".right", leftSelector: ".left", pauseSelector: ".pause", directionRight: true, containerSelector: "#slider-container", spinnerSelector: "#slider", images: ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"], imageDivClasses: ["face"] }); }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 | <div id="slider-container"> <div id="slider"> <!-- to be populated by the plugin--> </div> </div> <div class="nav"> <span class="left arrow"><</span> <span class="pause arrow">||</span> <span class="right arrow">></span> </div> |
cssは
font-awesome.min.css
を固定で読み込み、ナビゲーションなどは自分で調整すればOK。
ナビゲーションはjsの引数
・rightSelector → 右送りのオブジェクト
・leftSelector → 左送りのオブジェクト
・pauseSelector → 停止のオブジェクト
と指定する。
あとは
・containerSelector → コンテナ(画像の上のオブジェクト)
・spinnerSelector → 実際に画像が入るオブジェクト
・images → 画像のパスを指定
spinnerSelectorで指定した要素はpositionがabsoluteになるのでレイアウトに注意が必要。
わりと派手だが、画像を複数効果的に見せたいときなどはいいかもしれない。
Author Profile
SHARE
