The cycle shortcode displays cycling content slides. The options for this shortcode are shown below. See examples here.
| Option | Default | Example | Description |
|---|---|---|---|
| animate_in | (empty) | animate_in="fadeIn" | The default animation is to slide horizontally, you can also choose any animate.css animation. |
| animate_out | (empty) | animate_out="fadeOut" | The default animation is to slide horizontally, you can also choose any animate.css animation. |
| speed | 500 | speed="1000" | The speed of the transition in milliseconds. Note: this only applies to the Default animation. |
| autoplay | 0 | autoplay="1" | Enable autoplay. |
| autoplay_timeout | 2500 | autoplay_timeout="5000" | How long to display each slide in milliseconds. |
| autoplay_hover_pause | 0 | autoplay_hover_pause="1" | Pause autoplay on mouse hover. |
| dots | 0 | dots="1" | Dots navigation below slides. |
| loop | 0 | loop="1" | Infinity loop. Duplicate last and first items to get loop illusion. |
| width | 0 | width="300" | Container width; set to 0 for full width. |
| height | 0 | width="200" | Container height. |
| position | (empty) | position="float-right" | Choose an alignment for the cycle:
|
| controls | 1 | controls="0" | Display the controls. |
| controls_pos | (empty) | controls_pos="ctrls-center" | Choose an alignment for the cycle controls. Default position will be on the right.
|
| mouse_drag | 1 | mouse_drag="0" | Mouse drag enabled. |
| touch_drag | 1 | touch_drag="0" | Touch drag enabled. |
| auto_height | 0 | auto_height="1" | Animate the height of the container if the slide height changes. |
Example
[cycle animate_in="fadeIn" animate_out="fadeOut" autoplay="1" autoplay_timeout="5000" width="300" height="150"] [cycle_slide]This is one slide[/cycle_slide] [cycle_slide]<img src="example.png" alt="An image">[/cycle_slide] [/cycle]