The transition animation decides how one slide replaces the next. Gutenslider has slide and fade in the free plugin, and 30 more with Pro: four 3D effects, six shaped effects and twenty WebGL transitions.
Choose an effect
- Select the slider (the List View is the quickest way).
- Pick an option in Effect, in the slider’s settings. The effects are grouped; each one shows a short description.
- Press Preview in the slider’s toolbar: it runs the real slider with the effect in the editor.
Slide and fade (free)
- Slide moves the slides sideways. It is the only effect that works with several slides in view, so carousels use it.
- Fade crossfades one slide into the next. It suits heroes with a fixed headline, quotes and photo series.
3D effects (Pro)
Coverflow tilts the neighbouring slides like album covers, Cards stacks the slides like a deck, Cube turns them on the sides of a cube and Flip turns one slide over to show the next. Cards, Cube and Flip show one slide at a time.
Shaped and WebGL transitions (Pro)
The six shaped effects (Morph, Parallax, Tilt, Fan, Stack and Reveal) change the slides’ shape as they move, with CSS only. The twenty WebGL transitions, such as Liquid, Ripple, Swirl, Glitch and Burn, are drawn on the graphics card over a crossfade. See them on the examples page.
Speed and timing
With Pro, Transition time sets how long the change takes (0.7 seconds by default) and Time per slide how long each slide stays. Longer transitions suit fades and photos, short ones suit carousels. More in Slide duration and autoplay.
Reduced motion
Visitors who turn on “reduce motion” in their operating system get a calm slider: no autoplay, and the WebGL transitions become a crossfade. You don’t need to set anything for this.