Blocks

Blocks » Slideshow Block

This guide will show you how to use the Slideshow block to add an interactive image slideshow into a post or page.

It looks like this on the site:

Table of Contents

Add the Slideshow Block

To add the Slideshow block, click on the + Block Inserter icon and search for “slideshow”. Click it to add the block to the post or page.

how to add a Slideshow block with the "+ Block Inserter" button at the top left of the block editor.
Add a new block and search for Slideshow.

💡

Using your keyboard, you can also type /slideshow on a new line and press enter to quickly add a new Slideshow block.

how to add a Slideshow block by typing / and slideshow in a new block in the main editor area.
Type /slideshow in a new block.

For more, visit our detailed instructions on adding blocks.

↑ Table of Contents ↑

Add Images

When you first add a Slideshow block, you’re given two options: Upload and Select Images.

Example of how to upload or add images from the Media Library, Google Photos, Pexels Free Photos, or Openverse images on the Slideshow Block.
Uploading or selecting images on the Slideshow block.

Upload allows you to upload a new image or multiple images from your computer to your website.

Select Images lets you choose from previously uploaded images in your Media Library, or choose from Google Photos, or the Pexels Free Photos and Openverse photo libraries.

↑ Table of Contents ↑

Add Additional Images

You can add additional images to your slideshow using the Upload an image option below the slideshow you created:

adding images to the slideshow with the Upload an image option.
Add additional images to a slideshow.

↑ Table of Contents ↑

Edit Slideshow

You can use the Edit Slideshow button in the toolbar to add or remove images or rearrange the order in which they appear.

the Edit slideshow option on the Slideshow block toolbar.
Edit Slideshow button on the block toolbar.

↑ Table of Contents ↑

Reorder Images

The images are added to the slideshow in the order you select them. You can reorder the images using the Edit Slideshow option. When you edit the slideshow, you’ll notice a number next to each image when you select it. This number indicates what order the image will appear on your Slideshow block.

Reordering images on the Slideshow block.

↑ Table of Contents ↑

Block Toolbar

When you click on the block, a toolbar of options will appear above it:

the Slideshow block toolbar
Slideshow block toolbar

The Slideshow block has the following options in its toolbar:

  • Change block type.
  • Drag the block.
  • Move the block up or down.
  • Change alignment – to left, right, and center, as well as wide width and full width if supported by your theme.
  • Edit Slideshow.
  • More options.

↑ Table of Contents ↑

Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

the Slideshow block settings in the right sidebar.
Click on the ⚙️ icon to open the block settings

The Slideshow Block has multiple settings you can adjust in the Block Settings sidebar.

The Block Settings sidebar displaying the name of the block and additional options specific to the Slideshow block like Autoplay, Effects, and Image Settings.
Slideshow block settings
Autoplay

Enable this option to have your slideshow move between images automatically.

When enabled, a pause button will appear on the slideshow to let viewers pause the slideshow. You can also select the delay (in seconds) between automatic transitions:

The Autoplay toggle and the pause button on the Slideshow block to set the delay between transitions.
Pause button on the Autoplay-enabled Slideshow block.
Effects

In the Effects tab, you can choose between Slide and Fade effects for your slide transitions.

The Slide and Fade Transition effects options in the Slideshow block's Block Settings sidebar.
Transition effects on the Slideshow block.
Image Settings

In the Image Settings tab, you can choose the image sizes for the Slideshow block among the Thumbnail, Medium, Large, and Full-Size options.

Image settings in the Slideshow block's Block Settings sidebar with a drop-down to set the Image Size.
Image Size on the Slideshow block.
Advanced

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS to style the block. Learn more about adding additional CSS classes to blocks.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

Not quite what you're looking for?

Get Help