Cycle

The cycle shortcode displays cycling content slides. The options for this shortcode are shown below. See examples here.

OptionDefaultExampleDescription
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.
speed500speed="1000"The speed of the transition in milliseconds. Note: this only applies to the Default animation.
autoplay0autoplay="1"Enable autoplay.
autoplay_timeout2500autoplay_timeout="5000"How long to display each slide in milliseconds.
autoplay_hover_pause0autoplay_hover_pause="1"Pause autoplay on mouse hover.
dots0dots="1"Dots navigation below slides.
loop0loop="1"Infinity loop. Duplicate last and first items to get loop illusion.
width0width="300"Container width; set to 0 for full width.
height0width="200"Container height.
position(empty)position="float-right"Choose an alignment for the cycle:

  • (empty) – Center
  • float-left – Left
  • float-right – Right
controls1controls="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_drag1mouse_drag="0"Mouse drag enabled.
touch_drag1touch_drag="0"Touch drag enabled.
auto_height0auto_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