This plugin requires at least WordPress 3.0
Installation - http://www.youtube.com/watch?v=koxVQNzIRKs
How to create a perspective carousel - http://www.youtube.com/watch?v=glBz-FSTznc
How to transform a perspective carousel in an one-by-one carousel - http://www.youtube.com/watch?v=JSlPlvbF7bI
From this section you can:
- add a new carousel
-
select the carousel you want to edit by clicking "Carousel Settings"
- add/edit playlist images by clicking "Playlist"
- delete an existing carouel by clicking "Delete"
- duplicate an existing carouel by clicking "Duplicate"
From this section you can define the carousel settings.
Carousel Width | carousel width |
Carousel Height | carousel height |
Width 100% | Possible values: true - the carousel width will be 100% false - the carousel width will be what you've set for 'width' parameter |
Image Width | image width |
Image Height | image height |
Image increase coeficient for resolutions smaller than 769 (mobile devices) | it's a coeficient which will increase the size of the images on resolutions smaller than 769 (mobile devices). 1.0 - means no modification 1.4 - 40% more than the standard way |
Responsive |
Possible values: true - the carousel will responsive false - the carousel will not be responsive |
Responsive Relative To Browser | Possible values: true - the carousel will be responisve relatively to browser dimensions false - the carousel will be responisve relatively to parent div |
Center Plugin | Possible values: true - the carousel will be centered on the page false - the carousel will be centered on the page |
Auto Play | You can define the time (in seconds) until the next photo will play. If you set it 0 the carousel will not autoplay |
Number Of Visible Items | The number of visible items. It has to be an odd number: 3,5,7,9,11 etc |
Elements Horizontal Spacing | The horizontal distance between visible items |
Elements Vertical Spacing | The value with which the elements are becoming smaller |
Vertical Adjustment | This value will rise the whole carousel up |
Animation Time | The speed with which the elements are moving (in seconds) |
Easing | The animation easing. Possible values: easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce swing liniar |
Resize Images | If you are using images (or front image) inside the carousel you can set it to auto resize as it moves |
Border Width | the image border thickness |
Border Color OFF State | the image border color for OFF state. It can be a hexa value or 'transparent' |
Border Color ON State | the image border color for ON state. It can be a hexa value or 'transparent' |
Target Window For Link | Possible values: '_blank' - the link associated to the primary photo will open in a new window '_slef'- the link associated to the primary photo will open in the same window |
Show Element Title | Possible values: true - the photo title/description will apear false - the photo title/description will apear |
Title Color | title color, hexa value. |
Enable Touch Screen | Possible values: true - mobile touch screen support enabled false - mobile touch screen support disabled |
LightBox Window Width Divider | The LightBox window width divider. The Lightbox window with will be equal to browser width / LightBox Window Width Divider |
LightBox Window Height Divider | The LightBox window height divider. The Lightbox window with will be equal to browser height / LightBox Window Height Divider |
Controllers Settings | |
Show All Controllers | Possible values: true - all controllers will appear (next, previous, bottom navigation) false - all controllers will not appear (next, previous, bottom navigation) |
Show Navigation Arrows | Possible values: true - next, previous buttons will appear false - next, previous buttons will not appear |
Show Navigation Arrows On Init | Possible values: true - next, previous buttons will appear on first banner init false - next, previous buttons will not appear on first banner init |
Auto Hide Navigation Arrows | Possible values: true - next, previous buttons will hide when mouse out false - next, previous buttons will not hide when mouse out |
Show Bottom Navigation | Possible values: true - bottom navigation buttons will appear false -bottom navigation buttons will not appear |
Show Bottom Navigation On Init | Possible values: true - bottom navigation buttons will appear on first banner init false - bottom navigations buttons will not appear on first banner init |
Auto Hide Bottom Navigation | Possible values: true -bottom navigations buttons will hide when mouse out false - bottom navigations buttons will not hide when mouse out |
Show Preview Thumbs | Possible values: true - a preview image will appear on hovering each bottom button false - the preview image will not appear on hovering each bottom button |
Next&Prev Buttons Margin Top | margin-top for next/previous buttons |
Play Movie Margin Top | margin-top for play button |
Bottom Navigation Margin Bottom | margin-bottom for bottom navigation |
Circle Timer Settings | |
Show Circle Timer | Possible values: true - shows the circle timer false - hides the circle timer |
Circle Radius | circle radius |
Circle Line Width | circle line width |
Circle Color | circle color, in hexa |
Circle Alpha | circle alpha, in percents. Posible values 0-100 |
Behind Circle Color | behind circle color, in hexa |
Behind Circle Alpha | behind circle alpha, in percents. Posible values 0-100 |
Circle Left Position Correction | this value will be added to the left position of the circle timer |
Circle Top Position Correction | this value will be added to the top position of the circle timer |
Image | Main image |
Image Title | The current content title |
Preview Thumb | A preview image will appear on hovering the corresponding bottom button |
Link For The Image | You can specify a link associated to the primary photo |
Link Target | Possible values: *** If all your links will behave the same, you can ignore this parameter and use target from JS options |
Large Image | The path to the large image |
Vimeo Video ID | The VIMEO video ID |
YouTube Video ID | The YOUTUBE video ID |
Audio File | The path to the audio file. You need to have both extensions (.mp3 and .ogg) in order to work on all browsers and Operating Systems. The files should have the same name, the only difference would be the extension: follow_me.mp3 |
Self Hosted/Third Party Hosted Video | The path to the video file. You need to have both extensions (.mp4 and .webm) in order to work on all browsers and Operating Systems. The files should have the same name, the only difference would be the extension big_buck_bunny_trailer.mp3 |
The shortcode is:
[magic_carousel settings_id='1']
where
settings_id is the slider ID defined in "Manage Carousels" section