How to Create an Image Slider with Gutenberg and PublishPress Blocks
The Advanced Slider block in PublishPress Blocks lets you create image sliders (carousels) to present them on posts, pages, or even custom post types on your WordPress site.
After finishing this tutorial, you will be able to insert an image slider in the Gutenberg editor, and configure all its settings.
Step #1. Install the Plugin
- Click Plugins > Add New.
- Type PublishPress Blocks in the search box.
- Click Install Now
Step #2. Create a Post
- Click Posts > Add New.
- Enter a proper title.
- Click the ‘+’ symbol or type / to search for the slider block.
- Select Images slider
You will be prompted to add images, to start using the block.
- Click Add images.
- Select 4-5 images from your Media Library or upload them.
- Give the images a proper alt text.
- Click Select.
Step #3. The Slider Settings
The settings on the right column apply to each one of the images within the slider.
- Write a proper title and description for the first image.
- Click Action on click > Open custom link on the right column.
- Enter the link to where you want to redirect the users when clicking on it.
Repeat the process of adding custom text and a link to each one of the images. You can make use of the thumbnail navigation at the bottom to select, rearrange, or delete the image.
- Change Hover color, Title color, and Text color to your liking.
- Leave the default Text Alignment values.
- Click Publish twice.
You will see the slider on your published post. It has an arrow-navigation on both sides and it also has dot-like navigation.
Step #4. The Slider Global Settings
- Click PublishPress Blocks > Configuration > Default Blocks Config.
- Click the cogwheel beside the Images slider block.
These are the default configuration options for the image slider, that is, you can set your preferences once, and all the image sliders you create from that moment on will inherit these settings by default.
You can play a little bit with these options and proceed to create a new carousel to test them.
As you can see, creating an image slider is a straight and simple process with the PublishPress Blocks plugin for WordPress.
Thanks for reading! If you liked this feature, you find enjoy other PublishPress Blocks features including the contact form block, table of contents, accordion block, testimonials display and count up block.
How do you hide the slider in a mobile application?
Right now I’m using a special app to use a different page for mobile home. But I wanted a cleaner approach.
Hi Frank. We don’t have mobile / desktop control, but we plan to add it soon to our “Block Controls” feature.