Disclosure: we make Gutenslider, one of the blocks below. The facts about the other plugins come from their wordpress.org pages, their pricing pages and their current plugin files, checked in October 2026. Prices change often; follow the links before you buy.

The short answer

• You want slides with real content (headings, buttons, columns over a photo or video) and you build with blocks: Gutenslider, Spectra, Otter’s Content Slider or Stackable’s Carousel. All four let every slide hold any blocks.
• You only need images that rotate: the gallery-style blocks are enough, for example Kadence Blocks’ Advanced Gallery (carousel and slider modes) or Otter’s Slider block.
• You want layer animations and ready-made templates, positioned freely like in a design tool: a classic slider plugin such as Smart Slider 3 or Slider Revolution fits better. You build those in their own editor, not with blocks.

Slider blocks compared

“Via blocks on a slide” means you can put an embed or video block onto a slide; the slider itself doesn’t make the video the slide’s background or play it when the slide shows. “—” means we found no lightbox in the slider block’s own settings.

Gutenslider

Gutenslider is a slider block and nothing else. A slide has a background (image, video, color or gradient) and any blocks on top. The editor shows the slider as the page will, and a preview button plays the real slider, with its effect and autoplay, inside the editor.

• Free: slide and fade, carousels with up to eight slides per view per device, video slides from the Media Library or from links (paste a YouTube video or playlist and every video becomes a slide), a lightbox that grows out of the clicked image, 11 arrow styles, shape dividers, and a content width option that lines the text in a full-width slider up with the rest of your page.
• Pro: 26 more effects (20 WebGL transitions such as Ripple and Liquid, six shaped effects such as Fan and Morph) plus Coverflow, Cards, Cube and Flip, parallax, arrow and dot positions, lightbox thumbnails and zoom, and video from Vimeo, Dailymotion and TikTok. From $29/year for one site, or $199 once for unlimited sites.
• On the page: about 33 KB of JavaScript, gzipped, for a basic slider (Swiper core, controls and the view script; WordPress’ Interactivity API runtime comes from core on top) and one 7.3 KB CSS file. The script loads when a slider comes near the screen, and the layout is rendered on the server, so nothing shifts when it starts.

See it on the examples page or read what’s new in Gutenslider 7.

Spectra

Spectra (Brainstorm Force) is a large block collection with more than a million installs. Its Slider block is a parent block with slide blocks inside, and each slide takes any blocks, so it works much like Gutenslider. The slider is free and uses Swiper (about 40–44 KB gzipped in our measurement of the plugin files). Note that there are two plugins now: “Spectra Legacy” (the long-running one) and the newer “Spectra Blocks”, which is a separate install. If you already use Spectra for other blocks, its slider is the obvious first try.

Otter Blocks

Otter (Themeisle) has two sliders. The older Slider block is for images only and uses Glide.js. The Content Slider, added in July 2026, lets every slide hold any blocks and is very light: a 2 KB script on top of CSS scroll-snap. It is new and deliberately simple; there are no effects beyond the scroll.

Stackable

Stackable’s free Carousel block also takes inner blocks per slide and is built on CSS scroll-snap with its own small script (under 4 KB gzipped) and a fade mode; the plugin also has an image and video lightbox. A good pick if you want a light carousel and already like Stackable’s design controls.

Kadence Blocks

Kadence’s free Advanced Gallery block has carousel, fluid carousel, slider and thumbnail-slider modes, with a lightbox. It is images only. For slides with content, Kadence has an Advanced Slider block in the paid plan.

Getwid and Essential Blocks

Both have free slider blocks, and Getwid’s Content Slider takes any blocks per slide. Both use Slick, which needs jQuery on the front end. That is fine if your theme loads jQuery anyway; on a lean block theme it adds a library you otherwise wouldn’t load. More on that in which WordPress sliders are lightweight, and which still need jQuery.

When a classic slider plugin is the better choice

Smart Slider 3, Slider Revolution, MetaSlider, Soliloquy and Depicter work differently: you build the slider on its own admin screen and place it with a block or shortcode. That is worth it when you want:

• layers you position freely and animate one by one, like a mini After Effects (Smart Slider 3, Slider Revolution, Depicter);
• a big library of ready-made templates;
• the same slider on many pages, edited in one place.

The trade-off: the slides don’t use your theme’s blocks and styles, and the editor shows a placeholder instead of the slide. We compared two of them in detail: Gutenslider vs Smart Slider 3 and Gutenslider vs MetaSlider.

Is a slider coming to WordPress itself?

Not yet. There is no slider in core today, but work on one is active: a “Slider” block with slide blocks inside is on the Gutenberg roadmap and has draft pull requests. When it ships, simple sliders will need no plugin at all. Plugins like Gutenslider will still be the place for video slides, effects, lightboxes and fine control, the same way the core Gallery block didn’t replace gallery plugins.

How to choose

1. Do the slides need text and buttons? If not, a gallery carousel is enough.
2. Do you already use a block collection? Try its slider first; one fewer plugin is a good thing.
3. Do you need video slides, a lightbox or effects? Then compare what is free: in Gutenslider all three are in the free plugin.
4. Check the page weight on a test page with PageSpeed Insights before you commit: the slider is often the largest element on the page, so it decides the Largest Contentful Paint.

Build it in four steps

1. Add the Gutenslider block and pick your photos from the Media Library; each one becomes a slide. Use images at least 1600 px wide.
2. Set the alignment to full width in the block toolbar.
3. In the slider’s Slides panel turn on Full screen height. The slider now fills the height of the screen on every device.
4. Set Content to Same on all and add a heading, a short paragraph and a button. They stay in place while the photos change underneath.

For the calm look of a hero, choose the Fade effect in the slider settings. Press Preview in the slider’s toolbar to see it move in the editor.

Almost full screen

A slider that fills the screen completely hides the rest of the page; visitors may not notice they can scroll. A minimum height such as 80vh leaves a hint of the next section. The height can differ per device: the example uses 70vh on desktop, 60vh on tablets and 480px on phones.

Keep the text readable

• Give each slide an overlay: a dark color at 30–40 % opacity behind white text works on almost any photo.
• Set the focal point of each image so faces and horizons stay visible when phones crop the photo to a portrait shape.
• Turn the arrows off on phones; visitors swipe there, and the arrows would sit on the text.

With a video instead

Any slide can have a video background instead of a photo, muted and looping. See Full-screen video background slider.

Fast on the first screen

The first image of a hero slider is the largest element on the screen, so Gutenslider loads it with high priority and the others lazily, with a srcset that sends phones a small file. The layout is in the HTML before any script runs, so nothing jumps while the page loads.

Add a video background

1. Add the Gutenslider block and set it to full width; turn on Full screen height in the Slides panel for a full-screen video.
2. Select a slide and, in its Background settings, choose Video.
3. Pick a video from the Media Library. Loop and Muted are on, and the video pauses when its slide is not shown.
4. Add a Poster image: it shows until the video can play, and on connections that don’t load video.
5. Set Content to Same on all and add your headline and button.

Prepare the video file

• Keep it short: 10–20 seconds that loop without a visible jump.
• 1920 px wide is enough for a full-screen background; 1280 px is fine behind text with an overlay.
• Export as MP4 (H.264) without sound, at a moderate bitrate. 3–6 MB is a good target.
• Add an overlay (a dark color at 30–40 %) so white text stays readable on every frame.

Videos from YouTube or a link

Instead of uploading, a slide can play a video from a link: YouTube videos and playlists, or a direct link to an .mp4, .webm or .mov file, in the free plugin. Pro adds YouTube channels, Vimeo, Dailymotion and TikTok. Players load only when their slide shows; YouTube plays from youtube-nocookie.com. See the YouTube examples.

On phones

Muted, inline videos autoplay on iOS and Android. Use the slide’s Focal point to keep the subject in view when the video is cropped to a portrait screen. If the video is mostly decoration, consider a photo slider on phones instead: hide the video slider on phones with Show the slider on, and show a second, lighter slider there.

Choose an effect

1. Select the slider (the List View is the quickest way).
2. Pick an option in Effect, in the slider’s settings. The effects are grouped; each one shows a short description.
3. 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.

Set up a carousel

1. Add the Gutenslider block and choose your images; six or more work best for a carousel.
2. In the Slides panel, set Slides in view to 3 with the desktop switch on, then switch to tablet and set 2, and to phone and set 1. Up to eight slides per view are possible.
3. Set Space between slides per device, for example 16, 12 and 10 pixels.
4. Choose how far one arrow click moves with Slides per step: one slide at a time, or a whole page of slides.

Carousels need the Slide effect; fade and the 3D effects show one slide at a time (Coverflow is the exception, it shows the neighbours tilted).

Centered or aligned left

Center the active slide (in the Motion panel) keeps the active slide in the middle, with parts of its neighbours at the edges, a hint that there is more to swipe. Turn it off to start with the first slide at the left edge.

Slides with their own width

Pick Width from content in Slides in view and each slide keeps its own width, for example portrait and landscape photos at the same height, or a strip of logos. See the auto-width example.

Tips

• Turn on the lightbox so visitors can open a photo large; it grows out of the clicked image.
• Use images with the same aspect ratio, or set a fixed height so the row looks even.
• For a carousel of cards with text, put a Group block with an image, heading and button on each slide.

Let the slider grow with each slide

1. Select the slider and open the Slides panel.
2. Turn on Grow with the content. The slider now takes the height of the slide on show.
3. Use the device switch to set it per device. A common setup: a fixed height on desktop, where text sits next to the image, and grow with the content on phones, where everything stacks.

Or a fixed height

For photo sliders a steady height looks calmer. Set a Minimum height in the same panel, in any CSS unit:

The minimum height is a minimum: a slide with more content than fits still makes the slider taller, so text is never cut off. Full screen height fills the screen instead, see Fullscreen background slider.

Tips

• With adaptive height the dots at the bottom move with each slide’s height. Keep the arrows at the sides, or with Pro move the dots to the top (eight dot positions).
• Check the padding on phones: 40 px around the content on desktop is a lot on a small screen. Padding can be set per device.

Every height option is in the settings reference.

Link a whole slide

1. Select the slide (not the slider): click the slide’s background, or pick it in the List View.
2. Click Link the slide in the slide’s toolbar.
3. Search for a page or paste a URL, and choose whether it opens in a new tab.

The whole slide is now a link. A Linked label in the editor shows which slides have one. Use this for image sliders without text, for example a row of projects or products where each photo leads to its page.

Buttons and links on a slide

Each slide is a container for blocks, so a Buttons block or a link in a paragraph works as anywhere else on the page. This is the better choice when a slide has a headline and a call to action: visitors see what they click, and screen readers read a clear link text.

Don’t combine both on one slide: a slide link around a button makes two links in one place.

Link to one slide from elsewhere

Turn on Link to each slide in the slider’s Advanced settings and every slide gets an address such as #slide-3. A link to /tours/#slide-3 opens the page with that slide showing, and a button with the URL #slide-3 jumps there on the same page. Set a Link prefix for addresses like #tour-3, or give a slide its own name with Slide link name in the slide’s Advanced settings. More in Link to a single slide.

Or open the image

To let visitors see a photo larger instead of going to another page, turn on the lightbox: a click opens the image, and it grows out of its place on the slide.

All slide settings are in the settings reference.

Autoplay

Select the slider and open the Motion panel:

• Autoplay moves to the next slide on its own. It is on for new sliders.
• Pause while the pointer is over the slider stops autoplay while a visitor is looking or reading; it also pauses while the slider has keyboard focus.
• Loop starts again with the first slide after the last.

Visitors who turn on “reduce motion” in their operating system get no autoplay, whatever the setting.

Slide duration and transition time (Pro)

In the free plugin each slide stays three seconds and the change takes 0.7 seconds. Gutenslider Pro adds two sliders to the Motion panel:

Values that work

Any slide with text should stay long enough to be read twice. When in doubt, turn autoplay off and let visitors use the arrows and dots.

Video slides

With Play videos when their slide shows on, a video slide plays while it is active, and pauses when the slider moves on. Each slide can override this in its own settings. For long videos, turn autoplay off so the slider doesn’t move on mid-video.

See every motion setting in the settings reference, and the effects in Slide transition animations.

Move a slide

1. Select the slide: click its background, or pick it in the List View.
2. Use the move arrows in the slide’s toolbar to move it one place earlier or later.

Drag in the List View

For bigger changes open the List View (the icon with three lines at the top of the editor). Each slide is listed under the slider; drag a slide to its new place. This is also the quickest way to select a slide that is not on screen.

Choose the order when you add slides

When you pick several images from the Media Library at once, the order you click them in becomes the order of the slides. Adding slides later from the slider’s toolbar puts them at the end.

A random order on each visit

Turn on Random order in the slider’s Motion panel and visitors see the slides in a new order on each visit. It works on cached pages too, because the shuffle happens in the browser; the editor keeps the saved order. Useful for testimonials, partner logos, or a hero that should feel fresh for returning visitors.

Hide a slide instead of deleting it

To take a slide out for a while, select it and turn on Hide this slide in its settings. It stays in the editor and doesn’t show on the page until you turn it on again.

More on adding and editing slides: Getting started.

Every section below says what is in the free plugin and what is new in Pro. The free plugin has no watermark, no account and no trial. Pro adds effects and options on top, and a slider built with Pro never breaks when a license ends.

At a glance

26 new effects

Free: Slide and Fade, with loop, a centered active slide, autoplay and pause on hover.

New in Pro: six shaped effects. They work with one slide or several in view, without WebGL.

1. Morph: the slides beside the active one shrink into rounded cards and fade their text; the active one grows back to full size.
2. Parallax: the photo moves slower than its slide and zooms and dims as it leaves; the text moves faster.
3. Tilt: the neighbours turn away in 3D, like frames on a curved wall.
4. Fan: the neighbours drop and tip away along an arc, like cards in a hand.
5. Stack: a deck. The next slide slides in over the active one, which shrinks and darkens underneath.
6. Reveal: the next slide opens as a growing circle over the active one.

New in Pro: twenty WebGL transitions. The photos blend into each other on the graphics card.

7. Liquid
8. Displace
9. Ripple
10. Warp
11. Swirl
12. Kaleidoscope
13. Lens
14. Fluted glass
15. Zoom
16. Push
17. Fold
18. Wind
19. Burn
20. Pixelate
21. Mosaic
22. Blocks
23. Glitch
24. Signal
25. Datamosh
26. Chroma

With “reduce motion” turned on in the visitor’s system, the effects become a plain crossfade. The 3D effects Coverflow, Cards, Cube and Flip stay in Pro. Try them all on the examples page.

Video slides from any link

Paste links in “Add videos” and every video becomes a slide, with its thumbnail saved to the Media Library as the poster.

Free:

• YouTube videos and playlists, and links to video files (.mp4, .webm, .mov, .ogv)
• Per link: 1 to 50 videos, in the listed or reversed order, with or without YouTube Shorts (they play upright)
• “Play videos when their slide shows”, for the whole slider or one slide, and one sound for all videos of a slider: unmute one, the others follow
• A player loads only for the slide on screen and pauses when the slide leaves; the slider’s autoplay waits for a playing video
• YouTube plays from youtube-nocookie.com
• On phones the arrows and dots fade while a video plays, out of the way of the player’s controls
• Videos from the Media Library with loop, mute, pause when inactive, poster and focal point (these were Pro in 6.x)

New in Pro: YouTube channels (@handle), Vimeo (videos, users, channels, showcases), Dailymotion (videos, users, playlists) and TikTok videos. Vimeo plays with “do not track”.

A new lightbox

Free:

• Built on the browser’s own <dialog>: the photo grows out of its place on the slide
• Arrows, keys, swipe, a counter, and a light or dark look; focus returns to the slider when it closes
• Image and Video blocks on the slides open in it too, in slide order with the backgrounds
• “Link images to the file”, for lightbox plugins that open linked images

New in Pro: thumbnails, captions from the image’s title, caption, description or alt text, a fade opening, your own colors, and zoom: a full view of the photo, where a click zooms in where you click.

More ways to lay out a slide

Free:

• Content width: in a full-width slider the blocks line up with the theme’s wide or content width, like the header and the text of the page, while the photo stays full width. See the example
• Blocks below or above the image instead of on it; the image keeps its height, and arrows and dots stay on it
• Random order: the slides are shuffled on each visit, also on cached pages, before the first one shows
• Text arrows: “Previous” and “Next” in the site’s font
• Content position for all slides at once, automatic captions from the Media Library, color and gradient overlays, shape dividers (15 shapes), all 11 arrow styles, space between slides and up to eight slides in view; several of these were Pro in 6.x

New in Pro: arrows next to the blocks when they sit below or above the image, animated dots (a pill that slides along, or lines that fill with the autoplay time), and arrows that follow the pointer.

A new editor

Free and Pro:

• The slider in the editor looks the way it looks on the page; its arrows and dots page through the slides while you edit
• The Preview button runs the real slider, with its effect and autoplay, right in the editor
• The device switch in the settings follows the editor’s preview device; the content position is a 3 × 3 matrix in the toolbar
• The first click on a slider selects the slider, the next one the slide
• Turn a Gallery, Image or Cover block into a slider, and a slider back into a Gallery

A faster front end

Free and Pro: 7 drops jQuery, lightGallery and the parallax library. The slider script loads when a slider comes near the screen, with only the parts that slider uses. The layout is rendered on the server, so nothing jumps when the script arrives, and the first image loads with high priority while the rest wait. All CSS is one file of about 7 KB gzipped.

On the same test pages, mobile Lighthouse went from a performance score of 66–88 with 6.1.2 to 95–99 with 7.0. The largest contentful paint dropped from about 3.9 s to 2.1–3.2 s, and the layout shift from 0.52 to 0. Autoplay, parallax and the WebGL transitions respect “reduce motion”.

Pro and pricing

Pro now comes monthly or yearly, for one site, up to three sites or unlimited sites, from $2.99 a month; there is also a lifetime license. If you already have a license, it works with 7 as it is, and your subscription keeps the price you signed up with. Sliders built with Pro never break when a license ends. See Pro and pricing.

Updating from 6.x

The block names, every saved setting and the front-end class names stay the same. Old sliders open in the new editor without “Attempt recovery”: 27 migration tests check every saved setting of content from 5.x, 6.x and 7.0. If you use custom CSS for lightGallery or JavaScript on the Swiper instance, read Migrating from 6.x to 7.0 first. As with any update, back up the site before you start.

Gutenslider 7 needs WordPress 6.6 or newer and PHP 7.4 or newer. Getting started covers the install; the changelog lists every change.

Bug fixes

Since 7.0 came out, these were fixed:

• Photos chosen in the Media Library or uploaded into a new slider become image slides; in 7.1.0 they turned into empty video slides
• In a looped slider with few slides, the copies the loop shows after the last slide take clicks again: the lightbox opens the right photo, and links and video controls work
• Arrows that follow the pointer (Pro) show again
• When YouTube briefly fails to send a playlist, the newest videos are kept for 10 minutes instead of an hour
• Replacing a slide’s image in the editor shows the new image, not the next slide
• “Width from content” works with loop, and on one device only, without a layout shift
• Dots at the side are centered and clear of the arrows; dots on the right and the progress bar sit at the right
• Arrows next to the blocks stay readable on light backgrounds; text arrows get a soft shadow on photos

Thank you

Many of the changes come from your reports and requests in the support forum. Thank you for your patience while 7 was in the making. Questions or problems: the support forum, or email for Pro users.