商品詳細で使えそうな3D jQueryプラグイン

商品詳細で使えそうな3DのjQueryプラグインを試してみた。

設置方法は以下

js


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

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


&lt;div id="slider-container"&gt;
    &lt;div id="slider"&gt;
       &lt;!-- to be populated by the plugin--&gt;
    &lt;/div&gt;

&lt;/div&gt;
 &lt;div class="nav"&gt;
    &lt;span class="left arrow"&gt;&amp;#60;&lt;/span&gt;
    &lt;span class="pause arrow"&gt;||&lt;/span&gt;
    &lt;span class="right arrow"&gt;&amp;#62;&lt;/span&gt;
&lt;/div&gt;

1

2

3

4

5

6

7

8

9

10

11