English
资源说明：Extensible mootools carousel
Carousel
============
Extensible mootools carousel with dynamic elements addition/removal.
[Demo](http://tbela99.github.com/carousel/Demos/horizontal.html)
#### More demos
- [Vertical](http://tbela99.github.com/carousel/Demos/vertical.html)
- [Horizontal](http://tbela99.github.com/carousel/Demos/horizontal.html)
- [3D carousel](http://tbela99.github.com/carousel/Demos/3d.html)
How to use
---------------------
It is quite simple to use. a new class *Carousel.Extra* has been added. it allows you to make your carousel slide automatically. it has every Carousel options/properties plus some specific options which allow you to control the auto slide
### CSS:
/*
the container
*/
#slide {
width: 810px;
margin: 10px auto;
position: relative;
height: 300px;
width: 810px;
overflow: hidden;
}
/*
carousel tabs
*/
div.tabs a.selected {
text-decoration: underline;
}
/*
carousel items
*/
#slide div {
position: relative;
display: inline-block;
width: 400px;
margin-left: 5px;
}
/*
content
*/
#slide span {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
width: 380px;
color: #fff;
background: url(../Assets/images/grey.png);
background: rgba(0, 0, 0, .7)
}
### HTML:
Caption 1: put anything you want in the caption. Note that there is a link in the image
Caption 2: put anything you want in the caption. Note that there is a link in the image
Caption 3: put anything you want in the caption. Note that there is a link in the image
Caption 4: put anything you want in the caption. Note that there is a link in the image
Caption 5: put anything you want in the caption. Note that there is a link in the image
//the controls
### Javascript:
window.addEvent('domready', function () {
var duration = 300,
links = $$('div.tabs a'),
tab = new Carousel.Extra({
container: 'slide',
scroll: 2,
circular: true,
current: 3,
previous: links.shift(),
next: links.pop(),
tabs: links,
/*
mode: 'horizontal',
autostart: false,
*/
activeClass: 'selected',
fx: {
duration: duration
}
})
})
### Options:
* container - (*mixed*) the element that contains the panels.
* previous - (*mixed*, optional) element that moves carousel to the left when clicked.
* next - (*mixed*, optional) element that moves carousel to the right when clicked.
* tabs - (*mixed*, optional) elements associated to the carousel panels. a click on a tab makes associated panel visible.
* selector - (*string*, optional) use only children that match this selector. useful when you have something else in your html like arrows to move the carousel.
* link - (*string*, optional) indicates the way concurrent animations are handled. allowed values are *ignore* (default) ignore the new animation, *cancel* cancel current animation, *chain* run the new animation after the current is completed.
* activeClass - (*string*, optional) css class od the active tab.
* inactiveClass - (*mixed*, optional) css class of inactive tab.
* circular: (*boolean*, optional) determines how the carousel behaves when it reaches the bounds.
* mode - (*string*, optional) the carousel mode. allowed values are *vertical* and *horizontal*
* scroll - (*int*, optional) the number of items visible in the carousel, this must be set using css. the carousel will not attempt to resize the container to fit this number.
* distance - (*int*, optional) the number of images to cycle through each time next/previous are called .... defaults to 4.
* animation - (*string*, optional) the transition plugin to use for transition. default to *Move*. possible values are *Move* and *Rotate3D*
* fx - (*object*, optional) parameters for the animation. this can be any of the Fx parameters.
* current - (*int*, optional) index of the first displayed item. default to 0.
### Additional options for Rotate3D effect:
* margin - (*int*, optional) carousel margin.
* centerOffset - (*object*, optional) offset relative to the center of the carousel ellipsis. default to {x:0, y: 0}.
* xRadius - (*string*, optional) carousel ellipsis x radius.
* yRadius - (*string*, optional) carousel ellipsis x radius.
* min - (*mixed*, optional) min element size ratio.
* offsetAngle: (*boolean*, optional) determines how the carousel behaves when it reaches the bounds.
* zIndex - (*int*, optional) elements zIndex, default to 100.
### Carousel.Extra Options:
these options are specific to Carousel.Extra
* toggle - (*mixed*) element that toggles automatic slide when clicked
* interval - (*int*) interval between 2 animations in seconds.
* delay - (*int*) delay between the moment the next/previous button is clicked and the auto slide is restarted.
* autostart - (*boolean*) automatically start slide immediately after the carousel is created. default to false.
* reverse - (*boolean*) run the carousel in reverse order.
### Events:
#### change
Fired after the first item change.
##### Signature:
onChange(current)
##### Arguments:
4. current - (*int*) index of the first displayed element.
Method: add
------------
add an element to the carousel.
### Arguments:
- panel - (*mixed*) element to add.
- tab - (*mixed*, optional) tab associated to the element.
- index - (*int*, optional) position where the tab will be inserted. if not secified, the element will be inserted at the end.
### Returns:
* (*object*) - This Carousel instance.
Method: remove
------------
remove element at given index from the carousel.
### Arguments:
- index - (*int*)
### Returns:
* (*object*) - object containing the element and its associated tab {panel: panel, tab: tab}.
Method: next
------------
display the next set of items.
### Arguments:
- direction - (*int*, optional) indicate the direction of the carousel movement: -1 will move from right to left and 1 will move in the opposite direction. this has no effect if the option circular is false.
### Returns:
* (*object*) - This Carousel instance.
Method: previous
----------------
display the previous set of items.
### Arguments:
- direction - (*int*, optional) indicate the direction of the carousel movement: -1 will move from right to left and 1 will move in the opposite direction. this has no effect if the option circular is false.
### Returns:
* (*object*) - This Carousel instance.
Method: move
----------------
make an item visible.
### Arguments:
1. index - (*mixed*) index or item to show
2. direction - (*int*, optional) indicate the direction of the carousel movement: -1 will move from right to left and 1 will move in the opposite direction. this has no effect if the option circular is false.
### Returns:
* (*object*) - This Carousel instance.
Method: first
------------------------
### Returns:
* (*int*) - the index of the first displayed item
Method: isVisible
------------------------
return true if the item at *index* is visible.
### Arguments:
- index - (*mixed*) the item or its index in the items list.
### Returns:
* (*boolean*)
Carousel.Extra Method: start
------------------------
starts the automatic slide.
### Returns:
* (*object*) this Carousel instance
Carousel.Extra Method: Method: stop
------------------------
stop the automatic slide.
### Returns:
* (*object*) this Carousel instance
Carousel.Extra Method: Method: toggle
------------------------
toggle the automatic slide.
### Returns:
* (*object*) this Carousel instance
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
