This time I will share jQuery Plugin and tutorial about Tiny Responsive Background Slideshow Plugin With jQuery – slide.js, hope it will help you in programming stack.
| File Size: | 15.8 KB |
|---|---|
| Views Total: | 2581 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Just another jQuery responsive slideshow plugin which automatically fades through a list of slides with background images just like a carousel slider.
How to use it:
1. Place jQuery library and the jQuery.slide.js script at the end of the document.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery.slide.js"></script> |
2. Create the html for the slideshow and add your own background images using data-bg attribute as this:
1 |
<div class="slide"> |
2 |
<ul> |
3 |
<li data-bg="1.jpg"></li> |
4 |
<li data-bg="2.jpg"></li> |
5 |
<li data-bg="3.jpg"></li> |
6 |
<li data-bg="4.jpg"></li> |
7 |
</ul> |
8 |
</div> |
3. The main CSS styles for the slideshow.
01 |
.slide { |
02 |
position: relative; |
03 |
margin: 100px auto; |
04 |
width: 80%; |
05 |
height: 350px; |
06 |
background: #ccc; |
07 |
} |
08 |
09 |
.slide ul li { |
10 |
position: absolute; |
11 |
left: 0; |
12 |
top: 0; |
13 |
display: block; |
14 |
width: 100%; |
15 |
height: 100%; |
16 |
list-style: none; |
17 |
} |
4. Style the pagination & navigation controls.
01 |
.slide .dots { |
02 |
position: absolute; |
03 |
left: 0; |
04 |
right: 0; |
05 |
bottom: 20px; |
06 |
width: 100%; |
07 |
z-index: 2; |
08 |
text-align: center; |
09 |
} |
10 |
11 |
.slide .dots li { |
12 |
display: inline-block; |
13 |
margin: 0 10px; |
14 |
width: 10px; |
15 |
height: 10px; |
16 |
border: 2px solid #fff; |
17 |
border-radius: 50%; |
18 |
opacity: 0.4; |
19 |
cursor: pointer; |
20 |
transition: background .5s, opacity .5s; |
21 |
list-style: none; |
22 |
} |
23 |
24 |
.slide .dots li.active { |
25 |
background: #fff; |
26 |
opacity: 1; |
27 |
} |
28 |
29 |
.slide .arrow { |
30 |
position: absolute; |
31 |
top: 0; |
32 |
left: 0; |
33 |
width: 100%; |
34 |
height: 100%; |
35 |
} |
36 |
37 |
.slide .arrow .arrow-left, .slide .arrow .arrow-right { |
38 |
position: absolute; |
39 |
z-index: 2; |
40 |
top: 50%; |
41 |
margin-top: -25px; |
42 |
display: block; |
43 |
width: 50px; |
44 |
height: 50px; |
45 |
cursor: pointer; |
46 |
opacity: 0.5; |
47 |
transition: background .5s, opacity .5s; |
48 |
} |
49 |
50 |
.slide .arrow .arrow-left:hover, .slide .arrow .arrow-right:hover { opacity: 1; } |
51 |
52 |
.slide .arrow .arrow-left { |
53 |
left: 20px; |
54 |
background: url("../img/arrow-left.png"); |
55 |
} |
56 |
57 |
.slide .arrow .arrow-right { |
58 |
right: 20px; |
59 |
background: url("../img/arrow-right.png"); |
60 |
} |
5. Call the function on the top container to initialize the slideshow:
1 |
$('.slide').slide(); |
6. Plugin’s default customization options.
01 |
$('.slide').slide({ |
02 |
03 |
// auto play |
04 |
isAutoSlide: true, |
05 |
06 |
// auto pause on hover |
07 |
isHoverStop: true, |
08 |
09 |
// auto pause when the current windows loses focus |
