Examples
One slider per use case.
Each example is a live Gutenslider with the settings that make it. Free and Pro features are marked.
Free
Hero with fixed content
A headline and a button stay in place while four photos fade underneath. With “full screen height” on, the same slider fills the whole screen. The arrows are hidden on phones, where visitors swipe.
Settings content: same on all slides effect: fade height: 70vh · 60vh · 480px align: full arrows: off on phones
Free
Image carousel with lightbox
Three photos per view on desktop, two on tablets, one on phones, with a gap between them. A click on a photo makes it grow out of its place into the lightbox, with a counter, swipe and the arrow keys. The caption text and the thumbnails in this demo are Pro options; so are zoom, a fade opening and your own colors. Hash navigation is on: the address bar shows which slide is active, and the link opens the slider there.
Settings slides per view: 3 · 2 · 1 space between: 16 · 12 · 10 lightbox: on lightbox text: caption (Pro) thumbnails (Pro) autoplay: off hash navigation: on
Free
Testimonial slider
Text-only slides on color and gradient backgrounds, one quote each, with a fade. Sample content: the people and quotes below are invented to show the layout.
Settings content: per slide backgrounds: color, gradient effect: fade dots: bullets
Free
Content slider: text next to an image
Each slide holds a Columns block with an image and text, on a soft color. On phones the columns stack. Any block works on a slide: embeds from YouTube or Spotify, a product, a form.
Settings content: per slide backgrounds: color blocks: columns, image, heading, buttons grow with content: phones
Breakfast, all day
Avocado toast, pancakes and eggs any way, until four in the afternoon.
Salads by weight
Pick a base, three toppings and a dressing. We weigh it at the till.
Pizza on Fridays
Sourdough, a wood oven and one new topping every week.
Free
Video slider
Two short clips from the Media Library as slide backgrounds: muted, looping, playing inline, paused when their slide is not active. The poster image shows until the video can play.
Settings backgrounds: video + poster loop, muted, pause when inactive content: same on all slides effect: slide
Free
Auto-width carousel
With slides per view set to “auto”, every slide keeps its own width: portrait photos stay narrow, landscapes wide. Nice for a slow banner of photos.
Settings slides per view: auto space between: 12 height: 320px · 260px
Pro
Effects: slide, fade and 3D
The effect decides how one slide replaces the next. Slide and fade are in the free plugin; the 3D effects flip, cube, cards and coverflow come with Pro. Every slider here autoplays every three seconds.
Settings effect: slide · fade · flip · cube · cards · coverflow
Slide Free
Fade Free
Flip Pro
Cube Pro
Cards Pro
Coverflow Pro
Pro
Shaped and WebGL effects
Pro has six shaped effects, where slides change shape as they move, and twenty WebGL transitions drawn on the graphics card over a crossfade. Here are all of them. Without WebGL, or with “reduce motion” turned on, the WebGL transitions become a plain crossfade.
Settings shaped: 1.5 slides in view, centered, loop WebGL: one slide at a time
Shaped
Morph Pro
Parallax Pro
Tilt Pro
Fan Pro
Stack Pro
Reveal Pro
WebGL transitions
Liquid Pro
Displace Pro
Ripple Pro
Warp Pro
Swirl Pro
Kaleidoscope Pro
Lens Pro
Fluted glass Pro
Zoom Pro
Push Pro
Fold Pro
Wind Pro
Burn Pro
Pixelate Pro
Mosaic Pro
Blocks Pro
Glitch Pro
Signal Pro
Datamosh Pro
Chroma Pro
Pro
Animated dots
Two dot styles that move with the slider. Dots with size and color are free; Pro adds these styles, numbers (2 / 5), a progress bar, dots that show a few at a time, and eight positions.
Settings dot style: pill · lines with progress autoplay: 4 s
Pill Pro
The active dot stretches into a pill, and the highlight slides over to the next one.
Lines with progress Pro
Short lines; the active one fills up over the time per slide.
Pro
Scroll parallax
The backgrounds move slower than the page while you scroll. Scroll past this slider to see it, and try another direction or speed. With “reduce motion” turned on, the images stay still.
Settings parallax: up, 1.3 content: same on all slides align: full
Free
Shape dividers
A shape at the top and at the bottom, in the page’s background color, lets the slider flow into the sections around it. The bottom one is flipped where needed, so both edges run the same way. Try three of the fifteen shapes with the menu. Shape, color and flip are free; Pro adds the height and inverted shapes.
Settings divider top: wave divider bottom: wave, flipped color: page background align: full
Free · GPL v2 or later · No account
Build your first slider.
Gutenslider is free. Install it from the plugin directory; Pro adds more effects when you need them.