This time I will share jQuery Plugin and tutorial about Minimal jQuery Auto-fading Image Carousel Plugin – Fadeimages, hope it will help you in programming stack.
| File Size: | 2.14 MB |
|---|---|
| Views Total: | 3956 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Fadeimages is a minimalist jQuery plugin for creating a responsive image carousel with automatic fade-in and fade-out transitions.
Features:
- Responsive and full width.
- Extremely lightweight. Only 3kb unminified.
- Bottom dots navigation.
- Auto loop when reaches the last slide.
- Auto play and pause on mouse hover.
- jQuery based cross-browser transitions.
How to use it:
1. Insert your images into the carousel using CSS background-image property. The markup structure should be like this:
1 |
<div class="slide"> |
2 |
<ul> |
3 |
<li style="background-image:url(images/03.jpg)"></li> |
4 |
<li style="background-image:url(images/02.jpg)"></li> |
5 |
<li style="background-image:url(images/01.jpg)"></li> |
6 |
</ul> |
7 |
</div> |
2. Add the basic CSS styles as shown below into your document.
01 |
.slide { |
02 |
width: 100%; |
03 |
height: 382px; |
04 |
margin: 50px auto; |
05 |
position: relative; |
06 |
overflow: hidden; |
07 |
} |
08 |
09 |
.slide ul { |
10 |
margin: 0 auto; |
11 |
height: 382px; |
12 |
} |
13 |
14 |
.slide ul li { |
15 |
width: 100%; |
16 |
list-style: none; |
17 |
position: absolute; |
18 |
z-index: 1; |
19 |
height: 382px; |
20 |
background-position: top center; |
21 |
top: 0; |
22 |
left: 0; |
23 |
right: 0; |
24 |
} |
25 |
26 |
.slide #dots { |
27 |
position: absolute; |
28 |
left: 0; |
29 |
right: 0; |
30 |
bottom: 10px; |
31 |
height: 30px; |
32 |
z-index: 9999; |
33 |
font-size: 0; |
34 |
text-align: center; |
35 |
opacity: 0.7; |
36 |
} |
37 |
38 |
.slide #dots a { |
39 |
background: #333; |
40 |
margin: 0 6px; |
41 |
width: 18px; |
42 |
height: 18px; |
43 |
box-shadow: 0 0 1px 0 #333; |
44 |
border-radius: 100%; |
45 |
display: inline-block; |
46 |
cursor: pointer; |
47 |
} |
48 |
49 |
.slide #dots a.active { background: #FFF; } |
50 |
51 |
.slide .arrow { |
52 |
position: absolute; |
53 |
top: 50%; |
54 |
width: 70px; |
55 |
height: 100px; |
56 |
margin-top: -50px; |
57 |
background: #FFF; |
58 |
z-index: 999; |
59 |
opacity: 0.7; |
60 |
line-height: 100px; |
61 |
color: #333; |
62 |
text-align: center; |
63 |
text-decoration: none; |
64 |
} |
65 |
66 |
.slide .arrow.prev { left: 0; } |
67 |
68 |
.slide .arrow.next { right: 0; } |
69 |
70 |
.slide .arrow:active { |
71 |
background: #FAFAFA; |
72 |
opacity: 1; |
73 |
}<br type="_moz"> |
3. Include jQuery library and the jQuery Fadeimages plugin at the bottom of the document.
1 |
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> |
2 |
<script src="path/to/jquery.fadeImg.js"></script> |
4. Call the plugin on the parent element and done.
1 |
$(".slide").fadeImages(); |
5. Available options with defaults.
1 |
$(".slide").fadeImages({ |
2 |
time: 3000, // animation delay |
3 |
fade: 1000, // animation speed |
4 |
dots: true, // dots navigation |
5 |
arrows: false, // display next / prev navigation |
6 |
complete:function(){} // callback function |
7 |
}); |
Change log:
2016-11-12
- add mouse and touch slide function
2015-10-21
- added new features: next / prev navigation
This awesome jQuery plugin is developed by TERRILLTANG. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
