This time I will share jQuery Plugin and tutorial about Beautiful Automatic Photo Gallery/Slider With jQuery, hope it will help you in programming stack.
| File Size: | 2.89 MB |
|---|---|
| Views Total: | 5457 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
This is a jQuery/HTML/CSS powered automatic gallery/slider/carousel where the users are able to manually switch between images by clicking the thumbnails in the bottom scroller.
Also provides a fullscreen mode that displays the image slider (without the thumbnail scroller) in a fullscreen modal popup.
How to use it:
1. Add thumbnails together with the slider controls to the webpage.
01 |
<section id="content"> |
02 |
<div id="gallery_img"> |
03 |
<div id="image"></div> |
04 |
<img src="images/icons/left.png" id="lefty"> |
05 |
<img src="images/icons/right.png" id="righty"> |
06 |
<img src="images/icons/play.png" id="play"> |
07 |
<img src="images/icons/pause.png" id="pause"> |
08 |
<img src="images/icons/expand.png" id="expand"> |
09 |
</div> |
10 |
<div id="thumbs"> |
11 |
<div class="thumbs_style"> <img src="images/thumbs/a.jpg"> </div> |
12 |
<div class="thumbs_style"> <img src="images/thumbs/b.jpg"> </div> |
13 |
<div class="thumbs_style"> <img src="images/thumbs/c.jpg"> </div> |
14 |
<div class="thumbs_style"> <img src="images/thumbs/d.jpg"> </div> |
15 |
<div class="thumbs_style"> <img src="images/thumbs/e.jpg"> </div> |
16 |
... |
17 |
</div> |
18 |
</section> |
2. The basic styling of the slider.
01 |
#content{ |
02 |
width:845px; |
03 |
height:1000px; |
04 |
margin:0px auto; |
05 |
border-radius:3px; |
06 |
} |
07 |
08 |
#gallery_img{ |
09 |
width:845px; |
10 |
height:500px; |
11 |
float:left; |
12 |
position:relative; |
13 |
} |
14 |
15 |
#lefty{ |
16 |
width:23px; |
17 |
position:absolute; |
18 |
top:235px; |
19 |
left:10px; |
20 |
} |
21 |
22 |
#righty{ |
23 |
width:23px; |
24 |
position:absolute; |
25 |
top:235px; |
26 |
right:10px; |
27 |
} |
28 |
29 |
#play, #pause{ |
30 |
width:12px; |
31 |
position:absolute; |
32 |
top:239px; |
33 |
right:40px; |
34 |
} |
35 |
36 |
#play{ |
37 |
display:none; |
38 |
} |
39 |
40 |
#expand{ |
41 |
width:18px; |
42 |
position:absolute; |
43 |
top:478px; |
44 |
right:6px; |
45 |
} |
46 |
47 |
#thumbs{ |
48 |
height:100px; |
49 |
width:845px; |
50 |
float:left; |
51 |
overflow:auto; |
52 |
margin-top:10px; |
53 |
white-space:nowrap; |
54 |
} |
55 |
56 |
.thumbs_style{ |
57 |
display:inline-block; |
58 |
} |
59 |
60 |
.thumbs_style img{ |
61 |
width:105px; |
62 |
height:80px; |
63 |
border-radius:3px; |
64 |
border:3px solid rgba(0,0,0,0.4); |
65 |
} |
66 |
67 |
.gallery_img_style{ |
68 |
width:845px; |
69 |
height:500px; |
70 |
border-radius:3px; |
71 |
position:absolute; |
72 |
} |
3. The slider requires the latest jQuery JavaScript library to work.
1 |
<script src="https://code.jquery.com/jquery-3.3.1.js" |
2 |
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" |
3 |
crossorigin="anonymous"> |
4 |
</script> |
4. Load the main JavaScript after jQuery. Done.
