Updated / Forked version of professor cloud's Cloud Carousel
Original version here http://www.professorcloud.com/mainsite/carousel.htm
| Parameter | Description (from V1.0.0) | Default Value |
|---|---|---|
| minScale | The minimum scale appled to the furthest item. The item at the front has a scale of 1. To make items in the distance one quarter of the size, minScale would be 0.25. | 0.5 |
| reflHeight | Height of the auto-reflection in pixels, assuming applied to the item at the front. The reflection will scale automatically. A value of 0 means that no auto-reflection will appear. | 0 |
| reflGap | Amount of vertical space in pixels between image and reflection, assuming applied to the item at the front. Gap will scale automatically. | 0 |
| reflOpacity | Specifies how transparent the reflection is. 0 is invisible, 1 is totally opaque. | 0.5 |
| xRadius | Half-width of the circle that items travel around. | Width of container / 2.3 |
| yRadius | Half-height of the circle that items travel around. By playing around with this value, you can alter the amount of 'tilt'. | Height of container / 6 |
| xPos | Horizontal position of the circle centre relative to the container. You would normally set this to half the width of the container. | 0 |
| yPos | Vertical position of the circle centre relative to the container. You would normally set this to around half the height of container. | 0 |
| buttonLeft | A reference to the element that will serve as the 'rotate left' button. The button doesn't have to be within the container. | null |
| buttonRight | A reference to the element that will serve as the 'rotate right' button. The button doesn't have to be within the container. | null |
| titleBox | A reference to the element that will display an image's title attribute when hovered over. This element does not have to be within the container. | null |
| altBox | A reference to the element that will display an image's alt attribute when hovered over. This element does not have to be within the container. | null |
| FPS | This is the approximate frame rate of the carousel in frames per second. The higher the number, the faster and smoother the carousel movement will appear. However, frame rates that are too high can make the user's browser feel sluggish, especially if they have an under powered machine. The default setting of 30 is a good tradeoff between speed and performance. | 30 |
| Parameter | Description (from V1.0.1) | Default Value |
|---|---|---|
| speed | This value represents the speed at which the carousel rotates between items. Good values are around 0.1 ~ 0.3. A value of one will instantly move from one item to the next without any rotation animation. Values should be greater than zero and less than one. | 0.2 |
| autoRotate | Turn on auto-rotation of the carousel using either 'left' or 'right' as the value. The carousel will rotate between items automatically. The auto-rotation stops when the user hovers over the carousel area, and starts again when the mouse is moved off. | 'no' |
| autoRotateDelay | Delay in milliseconds between each rotation in auto-rotate mode. A minimum value of 1000 (i.e. one second) is recommended. | 1500 |
| Parameter | Description (from V1.0.2) | Default Value |
|---|---|---|
| mouseWheel | If set to true, this will enable mouse wheel support for the carousel. You will need to include this mouse wheel plugin first: http://plugins.jquery.com/project/mousewheel | false |
| Parameter | Description (from V1.0.4) | Default Value |
|---|---|---|
| bringToFront | If true, moves the item clicked on to the front. | false |
Cloud Carousel does not need any specific CSS styles to operate. However, you will want to style the carousel container, text boxes and buttons.
You may wish to set the initial display property to display:hidden for these items so they will automatically dissapear if JavaScript is disabled. This is a good thing as they have no use without JavaScript enabled. The plugin will automatically set the display property of these items to display:inline.
Setting the container to overflow:scroll is a good idea as this will create a neat scrolling box with the images inside if JavaScript is disabled.
It is advisable not to apply styles to the images used in the carousel.
First off, i didn't. I copied something that is awesome and made it a little bit better. It didn't work as intended and the last update was in march 2011 so i figured it might be time for an update.
Hope you find any use for it!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent