Cycle

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:

  • (empty) – Center
  • float-left – Left
  • float-right – Right
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.

  • (empty) – Right
  • ctrls-center – Center
  • ctrls-left – Left
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]

Still having trouble? Head over to the forums.

Forums