Blog

Tutorial: your first slider with Gutenslider

2 min read
Futuristic arts complex reflected in water

This tutorial builds a first slider from start to finish: add the block, choose the images, decide how the content behaves and adjust the settings. It takes about ten minutes. (Updated for Gutenslider 7.0.)

1. Add the Gutenslider block

Open a page in the block editor. There are three ways to add the block:

  • the blue + in the top bar, then search for “Gutenslider”,
  • the small + that appears between blocks,
  • or type /gutenslider in an empty paragraph and press Enter.

2. Choose the slides

The block opens the Media Library. Select several images at once by holding ⌘ (Mac) or Ctrl (Windows) while you click; the order you click them in becomes the slide order. Press Select and every image becomes a slide. Videos work the same way.

3. Fixed or changing content

You can leave the slides empty for a plain slideshow, or put blocks on them. Gutenslider has two modes for that:

  • Changing content (default): each slide has its own blocks, for example a different headline on every photo.
  • Fixed content: one set of blocks stays in place while the pictures change underneath, for example your site’s headline and a button.

See both side by side on the examples page, and read more in Fixed vs changing content.

4. Pick a transition

Slide moves the slides sideways, fade blends one into the next. Fade suits fixed content, because only the background changes. Gutenslider Pro adds flip, cube, cards and coverflow; compare them on the examples page.

5. The basic settings

Select the slider (the List View helps when a slide is selected) and look at its sidebar:

  • Autoplay: the slider moves on its own. Without it, visitors use the arrows, the dots, swipe or the arrow keys.
  • Arrows and dots: on or off, per device.
  • Minimum height: the slider never gets lower than this, and grows when the content needs more room.
  • Fullscreen background: the slider fills the screen behind the content that follows.

Every setting is listed in the settings reference.

6. Selecting the right block

A slider is a block with blocks inside (the slides), which have blocks inside (your content). Clicking selects the innermost one. To get to the slider, open the List View (the icon with three lines in the top bar) or press the “Select parent” button at the left of the block toolbar.

Next steps