This time I will share jQuery Plugin and tutorial about Smooth CSS3 Animated Slideshow Plugin With jQuery – Image Carousel, hope it will help you in programming stack.
| File Size: | 4.26 KB |
|---|---|
| Views Total: | 2016 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A simple, dynamic jQuery carousel slideshow plugin which uses CSS3 transitions to fade infinitely through an array of images defined in the JavaScript.
How to use it:
1. Create an empty HTML5 unordered list for the slideshow.
1 |
<ul class="slider"> |
2 |
<!-- next / prev navigation --> |
3 |
<span class="left arrow">«</span> |
4 |
<span class="right arrow">»</span> |
5 |
</ul> |
2. The core CSS styles for the slideshow. You might need to change the fixed height to a percentage value for responsive web layout.
01 |
.slider { |
02 |
position: relative; |
03 |
width: 600px; |
04 |
height: 450px; |
05 |
margin: auto; |
06 |
padding: 0; |
07 |
} |
08 |
09 |
.slider li { |
10 |
position: absolute; |
11 |
top: 0; |
12 |
width: 100%; |
13 |
transition: opacity 0.85s ease; |
14 |
} |
15 |
16 |
.slider li span { |
17 |
position: absolute; |
18 |
bottom: 10px; |
19 |
right: 10px; |
20 |
background: rgba(0, 0, 0, 0.4); |
21 |
padding: 3px 8px; |
22 |
border-radius: 3px; |
23 |
} |
24 |
25 |
.slider img { width: 100%; } |
26 |
27 |
.slider .arrow { |
28 |
position: absolute; |
29 |
cursor: pointer; |
30 |
width: 50px; |
31 |
height: 100px; |
32 |
font-size: 40px; |
33 |
top: 50%; |
34 |
margin-top: -50px; |
35 |
text-align: center; |
36 |
line-height: 100px; |
37 |
z-index: 1; |
38 |
transition: background 0.4s ease-out; |
39 |
text-shadow: 1px 2px 2px #000; |
40 |
background: rgba(0, 0, 0, 0.3); |
41 |
} |
42 |
43 |
.slider .left.arrow { |
44 |
left: 0; |
45 |
border-radius: 0 8px 8px 0; |
46 |
} |
47 |
48 |
.slider .right.arrow { |
49 |
right: 0; |
50 |
border-radius: 8px 0 0 8px; |
51 |
} |
52 |
53 |
.slider .arrow:hover { background: rgba(0, 0, 0, 0.5); } |
54 |
55 |
.slider .hidden { opacity: 0; } |
3. Create an array of images for the slideshow.
01 |
var carouselImages = [ |
02 |
{ |
03 |
image_url: 'https://unsplash.it/600/450?image=672', |
04 |
title: 'Matthew Wiebe', |
05 |
photographer_id: 'unsplashs' |
06 |
}, |
07 |
{ |
08 |
image_url: 'https://unsplash.it/600/450?image=671', |
09 |
title: 'Nuno Silva', |
10 |
photographer_id: 'unsplashs' |
11 |
}, |
12 |
{ |
13 |
image_url: 'https://unsplash.it/600/450?image=670', |
14 |
title: 'Gabriel Garcia Marengo', |
15 |
photographer_id: 'unsplashs' |
16 |
}, |
17 |
{ |
18 |
image_url: 'https://unsplash.it/600/450?image=674', |
19 |
title: 'Maja Petric', |
20 |
photographer_id: 'unsplashs' |
21 |
}, |
22 |
{ |
23 |
image_url: 'https://unsplash.it/600/450?image=676', |
24 |
title: 'Drew Patrick Miller', |
25 |
photographer_id: 'unsplashs' |
26 |
}, |
27 |
{ |
28 |
image_url: 'https://unsplash.it/600/450?image=680', |
29 |
title: 'Milada Vigerova', |
30 |
photographer_id: 'unsplashs' |
31 |
} |
32 |
]; |
4. Include the needed jQuery library at the bottom of the webpage.
1 |
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script> |
5. The jQuery script to active the slideshow.
01 |
var slide, slider = $('.slider'), leftArrow = slider.find('.left'), rightArrow = slider.find('.right'); |
02 |
03 |
carouselImages.forEach(function(obj){ |
04 |
var content = $(<
source : jqueryscript.net |
