This time I will share jQuery Plugin and tutorial about Automatic Image Carousel Slideshow Plugin with jQuery – cxSlide, hope it will help you in programming stack.
| File Size: | 1.77 MB |
|---|---|
| Views Total: | 3969 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
cxSlide is a lightweight, flexible and extensible jQuery image carousel plugin with the following features:
- Cycles through a series of Html contents.
- Vertical & horizontal sliding animations.
- Fade in & fade out transitions.
- Fully customizable appearance via CSS.
- Auto-rotation on page load.
- Arrows/thumbnails navigation and numeric pagination.
- Compatible with major browsers.
Basic Usage:
1. Include jQuery JavaScript library and the jQuery cxSlide plugin in the document.
1 |
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> |
2 |
<script src="js/jquery.cxslide.min.js"></script> |
2. Create a basic image carousel/slideshow with the following DOM structure.
01 |
<div id="demo" class="cxslide"> |
02 |
<div class="box"> |
03 |
<ul class="list"> |
04 |
<li><a href="#1"><img src="1.jpg" width="600" height="280"></a> |
05 |
<p>Description 111</p> |
06 |
</li> |
07 |
<li><a href="#2"><img src="2.jpg" width="600" height="280"></a> |
08 |
<p>Description 222</p> |
09 |
</li> |
10 |
<li><a href="#3"><img src="3.jpg" width="600" height="280"></a> |
11 |
<p>Description 333</p> |
12 |
</li> |
13 |
<li><a href="#4"><img src="4.jpg" width="600" height="280"></a> |
14 |
<p>Description 444</p> |
15 |
</li> |
16 |
<li><a href="#5"><img src="5.jpg" width="600" height="280"></a> |
17 |
<p>Description 555</p> |
18 |
</li> |
19 |
</ul> |
20 |
</div> |
21 |
</div> |
3. Style the image carousel/slideshow however you like.
01 |
.cxslide { |
02 |
overflow: hidden; |
03 |
position: relative; |
04 |
width: 600px; |
05 |
height: 280px; |
06 |
border: 1px solid #777; |
07 |
background: #000; |
08 |
} |
09 |
10 |
.cxslide a { |
11 |
color: #eee; |
12 |
text-decoration: none; |
13 |
} |
14 |
15 |
.cxslide .box { |
16 |
overflow: hidden; |
17 |
position: relative; |
18 |
width: 600px; |
19 |
height: 280px; |
20 |
} |
21 |
22 |
.cxslide .list { |
23 |
overflow: hidden; |
24 |
width: 9999px; |
25 |
} |
26 |
27 |
.cxslide .list li { |
28 |
float: left; |
29 |
position: relative; |
30 |
width: 600px; |
31 |
} |
32 |
33 |
.cxslide .list img { vertical-align: top; } |
34 |
35 |
.cxslide .list p { |
36 |
position: absolute; |
37 |
bottom: 0; |
38 |
left: 0; |
39 |
width: 100%; |
40 |
height: 24px; |
41 |
color: #eee; |
42 |
font: 12px/24px; |
43 |
text-indent: 12px; |
44 |
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#99000000', endColorstr='#99000000'); |
45 |
background: rgba(0,0,0,0.6); |
46 |
} |
47 |
48 |
.cxslide .btn { |
49 |
overflow: hidden; |
50 |
position: absolute; |
51 |
bottom: 4px; |
52 |
right: 6px; |
53 |
} |
54 |
55 |
.cxslide .btn li { |
56 |
float: left; |
57 |
width: 16px; |
58 |
height: 16px; |
59 |
margin: 0 0 0 10px; |
60 |
border-radius: 2px; |
61 |
background: #eee; |
62 |
color: #333; |
