This time I will share jQuery Plugin and tutorial about Horizontal & Vertical Image Carousel Plugin For jQuery, hope it will help you in programming stack.
| File Size: | 6.96 KB |
|---|---|
| Views Total: | 3330 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Yet another jQuery slideshow / carousel plugin used to create horizontal, vertical or crossfading image carousels with several customization options.
Features:
- Autoplay.
- Endless looping.
- Custom trigger events.
- Custom animations.
- Support both horizontal or vertical carousel.
- Next / prev navigation and dots indicator.
How to use it:
1. Insert a list of images into the carousel.
01 |
<div id="demo" class="image-slider"> |
02 |
<div class="box"> |
03 |
<ul class="list"> |
04 |
<li><a href="#"><img src="1.jpg" alt="Alt"></a></li> |
05 |
<li><a href="#"><img src="2.jpg" alt="Alt"></a></li> |
06 |
<li><a href="#"><img src="3.jpg" alt="Alt"></a></li> |
07 |
<li><a href="#"><img src="4.jpg" alt="Alt"></a></li> |
08 |
</ul> |
09 |
</div> |
10 |
</div> |
2. Add custom CSS styles to the carousel.
01 |
.image-slider { |
02 |
position: relative; |
03 |
height: 264px; |
04 |
width: 424px; |
05 |
overflow: hidden; |
06 |
border: 1px solid #C5C5C5; |
07 |
} |
08 |
09 |
.image-slider .box { |
10 |
overflow: hidden; |
11 |
position: relative; |
12 |
width: 100%; |
13 |
height: 100%; |
14 |
} |
15 |
16 |
.image-slider .list { |
17 |
overflow: hidden; |
18 |
width: 9999px; |
19 |
} |
20 |
21 |
.image-slider .list li { |
22 |
float: left; |
23 |
position: relative; |
24 |
width: 424px; |
25 |
} |
26 |
27 |
.image-slider .list li a { display: block; } |
28 |
29 |
.image-slider .list img { _vertical-align: top; } |
30 |
31 |
.image-slider .btn { |
32 |
position: absolute; |
33 |
left: 30px; |
34 |
bottom: 30px; |
35 |
z-index: 3; |
36 |
width: 150px; |
37 |
height: 10px; |
38 |
font: 0/0 Arial; |
39 |
} |
40 |
41 |
.image-slider .btn li { |
42 |
display: inline-block; |
43 |
margin-right: 3px; |
44 |
width: 10px; |
45 |
height: 10px; |
46 |
background: url(../images/slide-btn.png) no-repeat -35px 0; |
47 |
cursor: pointer; |
48 |
*display: inline; |
49 |
*zoom: 1; |
50 |
} |
51 |
52 |
.image-slider .btn .selected { |
53 |
width: 35px; |
54 |
background-position: 0 0; |
55 |
} |
56 |
57 |
.image-slider .plus, .image-slider .minus { |
58 |
position: absolute; |
59 |
left: 0; |
60 |
top: 50%; |
61 |
margin-top: -17px; |
62 |
width: 55px; |
63 |
height: 35px; |
64 |
line-height: 35px; |
65 |
background: rgba(0,0,0,0.6); |
66 |
color: #fff; |
67 |
text-align: center; |
68 |
cursor: pointer; |
69 |
} |
70 |
71 |
.image-slider .plus { |
72 |
right: 0; |
73 |
left: auto; |
74 |
} |
3. Add jQuery library and the jQuery slideshow.js script at the bottom of the web page.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="js/jquery.slideshow.js"></script> |
4. Initialize the carousel. Just call the function on the top element and done.
1 |
$('#demo').slideShow({/*OPTIONS*/}); |
5. Full customization options.
01 |
$('#demo').slideShow({ |
02 |
03 |
// custom trigger event |
