This time I will share jQuery Plugin and tutorial about Minimal 3D Perspective Image Carousel With jQuery And CSS3, hope it will help you in programming stack.
| File Size: | 2.92 KB |
|---|---|
| Views Total: | 8534 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Just another 3D perspective image slider/carousel that allows your users to rotate through an html list of images in a 3D space, implemented in jQuery and CSS/CSS3.
How to use it:
1. Import jQuery library and the core JavaScript file slider.js into the html document when needed.
1 |
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> |
2 |
<script src="slider.js"></script> |
2. Insert your images as a list into the 3D perspective slider.
01 |
<ul> |
02 |
<li class="left2"> |
03 |
<img src="1.png"> |
04 |
</li> |
05 |
|
06 |
<li class="left1"> |
07 |
<img src="2.png"> |
08 |
</li> |
09 |
10 |
<li class="active"> |
11 |
<img src="3.png"> |
12 |
</li> |
13 |
14 |
<li class="right1"> |
15 |
<img src="4.png"> |
16 |
</li> |
17 |
18 |
<li class="right2"> |
19 |
<img src="5.png"> |
20 |
</li> |
21 |
<li > |
22 |
<img src="6.png"> |
23 |
</li> |
24 |
<li > |
25 |
<img src="7.png"> |
26 |
</li> |
27 |
</ul> |
3. The core CSS/CSS3 styles for the 3D perspective slider.
01 |
ul { |
02 |
height: 400px; |
03 |
width: 225px; |
04 |
margin: 0 auto; |
05 |
list-style: none; |
06 |
position: relative; |
07 |
} |
08 |
09 |
ul li { |
10 |
cursor: pointer; |
11 |
position: absolute; |
12 |
transition: all 0.6s ease-in; |
13 |
opacity: 0; |
14 |
margin-top: 10px; |
15 |
} |
16 |
17 |
ul li img { |
18 |
width: 100%; |
19 |
cursor: pointer; |
20 |
} |
21 |
22 |
li.active { |
23 |
z-index: 999; |
24 |
opacity: 1; |
25 |
} |
26 |
27 |
li.left2 { |
28 |
transform: perspective(600px) translateX(-160%) rotateY(-40deg) scale(0.5); |
29 |
opacity: 1; |
30 |
} |
31 |
32 |
li.left1 { |
33 |
transform: translateX(-102%) scale(0.8); |
34 |
opacity: 1; |
35 |
} |
36 |
37 |
li.right1 { |
38 |
transform: translateX(102%) scale(0.8); |
39 |
opacity: 1; |
40 |
} |
41 |
42 |
li.right2 { |
43 |
transform: perspective(600px) translateX(160%) rotateY(40deg) scale(0.5); |
44 |
opacity: 1; |
45 |
} |
This awesome jQuery plugin is developed by zhaolong06. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
