This time I will share jQuery Plugin and tutorial about Responsive Adaptable Image Slider Plugin For jQuery – resize-slider, hope it will help you in programming stack.
| File Size: | 6.56 KB |
|---|---|
| Views Total: | 7621 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
resize-slider is a fully responsive, mobile-friendly and fullscreen background image slideshow/slider plugin which allows to automatically apply the user specified CSS background properties depending on the screen size and screen orientation. Licensed under theCC BY-NC-ND 4.0 | Attribution-NonCommercial-NoDerivatives 4.0 International.
How to use it:
1. Add references to jQuery JavaScript library and the jQuery resize-slider plugin’s files into your webpage.
1 |
<link rel="stylesheet" href="css/resize-slider.css"> |
2 |
<script src="js/jquery/2.2.2.js"></script> |
3 |
<script src="js/resize-slider-min.js"></script> |
2. Create a container for the fullscreen background image slideshow.
1 |
<div id="resize<a href="https://www.jqueryscript.net/slider/">Slider</a>"></div> |
3. Insert your background images to the slideshow and specify the CSS background properties for each image.
01 |
$("#resizeSlider").resizeSlider( |
02 |
{ |
03 |
"image": |
04 |
{ |
05 |
"presentation": |
06 |
{ |
07 |
"landscape": |
08 |
{ |
09 |
"url" : "url(1.jpg)", |
10 |
"size" : "cover", |
11 |
"repeat" : "no-repeat", |
12 |
"position" : "center top" |
13 |
}, |
14 |
"portrait": |
15 |
{ |
16 |
"url" : "url(1.jpg)", |
17 |
"size" : "cover", |
18 |
"repeat" : "no-repeat", |
19 |
"position" : "right center" |
20 |
} |
21 |
}, |
22 |
23 |
"presentation 1": |
24 |
{ |
25 |
"landscape": |
26 |
{ |
27 |
"url" : "url(1.jpg)", |
28 |
"size" : "cover", |
29 |
"repeat" : "no-repeat", |
30 |
"position" : "center bottom" |
31 |
}, |
32 |
"portrait": |
33 |
{ |
34 |
"url" : "url(1.jpg)", |
35 |
"size" : "cover", |
36 |
"repeat" : "no-repeat", |
37 |
"position" : "left center" |
38 |
} |
39 |
}, |
40 |
41 |
"presentation 2": |
42 |
{ |
43 |
"landscape": |
44 |
{ |
45 |
"url" : "url(2.jpg)", |
46 |
"size" : "cover", |
47 |
"repeat" : "no-repeat", |
48 |
"position" : "center bottom" |
49 |
}, |
50 |
"portrait": |
51 |
{ |
52 |
"url" : "url(2.jpg)", |
53 |
"size" : "cover", |
54 |
"repeat" : "no-repeat", |
55 |
"position" : "right top" |
56 |
} |
57 |
}, |
58 |
59 |
"presentation 3": |
60 |
{ |
61 |
"landscape": |
62 |
{ |
63 |
"url" : "url(3.jpg)", |
64 |
"size" : "cover", |
65 |
"repeat" : "no-repeat", |
66 |
"position" : "center center" |
67 |
}, |
68 |
"portrait": |
69 |
{ |
70 |
"url" : "url(3.jpg)", |
71 |
"size" : "cover", |
72 |
"repeat" : "no-repeat", |
73 |
"position" : "left center" |
74 |
} |
75 |
}, |
76 |
} |
77 |
}); |
4. Default configuration options.
01 |
$("#resizeSlider").resizeSlider({ |
02 |
03 |
// transition speed |
04 |
"transition" : 750, |
05 |
06 |
// transition delay |
07 |
"speed" : 3500, |
08 |
09 |
// pause on hover |
10 |
"hover" : false, |
11 |
12 |
// If is true, show images randomly |
13 |
"aleatorio" : false, |
14 |
15 |
// LETF | NONE | RIGHT |
16 |
"float" : "left", |
17 |
