JQuery Feature Carousel Plugin is a relatively excellent carousel image plugin abroad. Click here to enter the original text.
Plug-in Features:
1. Handle the 3d carousel effect of Div.
2. Support for one center, 2 side functions
3. The center area can be clicked
4. Show hidden text function (can be displayed anywhere in the picture using CSS)
5. Can modify the speed, effect, and many other parameters.
6. Support Chrome,firefox,safari and IE6 + browser.
7. Need jquery v1.3+
8. Support for picture pre-loading
How to use:
1. Introduction of jquery v1.3+ and Carousel.js files
2. Introduce the appropriate CSS file
3. Format your HTML.
4. Enable your carousel.js as follows
[HTML]View PlainCopy
- <script type="Text/javascript">
- $ (document). Ready (function () {
- $ ("#carousel"). Featurecarousel ({
- Include options like this:
- (use quotes with string values, and no trailing comma after last option)
- Option:value,
- Option:value
- });
- });
- </Script>
Configuration parameters:
Name |
Describe |
Type |
Default value |
Largefeaturewidth |
In 3 cases, "0" means width is displayed in the original size, the actual width of "0" "1" is multiplied by this value, greater than "1", and the width can be customized |
Integer |
0 |
Largefeatureheight |
Ditto, for the height of the picture |
Integer |
0 |
Smallfeaturewidth |
In 3 cases, "0" means width is displayed in the original size, the actual width of "0" "1" is multiplied by this value, greater than "1", and the width can be customized |
Integer |
0.5 |
Smallfeatureheight |
Ibid., changed to height |
Integer |
0.5 |
TopPadding |
Padding value above the perimeter container |
Integer |
20 |
Sidepadding |
Left and right padding values from the perimeter container |
Integer |
50 |
Smallfeatureoffset |
Examples of container examples for both sides of content |
Integer |
50 |
Startingfeature |
The serial number placed in the center |
Integer |
1 |
Carouselspeed |
Time to complete a carousel |
Integer |
1000 |
AutoPlay |
Greater than 0, the time interval for the carousel to run. equals 0 means not automatically running |
Integer |
4000 |
Pauseonhove |
Mouse on the tentative |
Boolean |
True |
Onhover |
Put the mouse on the stop |
Boolean |
False |
Stoptrackerindividual |
|
Boolean |
True |
Trackersummation |
|
Boolean |
True |
Preload |
|
Boolean |
True |
Displaycutoff |
|
Integer |
0 |
Animationeasing |
Caching effects (used with easing plug-ins) |
String |
' Swing ' |
Leftbuttontag |
Left-scrolling button |
String |
' #carousel-left |
Rightbuttontag |
Right-scrolling button |
String |
' #carousel-right ' |
Captionbelow |
Title at the bottom of the picture |
Boolean |
False |
Movedtocenter |
Move into center-triggered callback function |
function |
$.noop |
Leavingcenter |
callback function from center trigger |
function |
$.noop |
Clickedcenter |
Click the middle link to send the callback function |
function |
$.noop |
Featurecarousel.js 3d Carousel Diagram Plugin