How to Add Slider in Gutenberg Block Editor

New Gutenberg Block Editor has changed the way how we use WordPress, creating some modern-looking pages and posts are never been so easier but Gutenberg has a long way to go and there are some things that are still missing from Gutenberg like creating a slider which is one of a key part of modern web design.

In this article, we are going to take a look at how we can create sliders using Gutenberg Block Editor.

Table of Contents

What is a Slider?

I know you know it already but still just a refresher. A slider is a layout that is used to show multiple contents at a single location where content keeps changing after a certain interval. Slider is one of the most used things in current design either it is a product, testimonials, or image gallery sliders are being used everywhere.

The slider can make your site much more interactive and alive, it appeals to the user to interact and engage with the site and it’s a perfect way of showing more content in a smaller form factor.

How to Create Slider in Gutenberg

Unfortunately, Gutenberg currently doesn’t offer any block that supports sliders so we need to use a third-party plugin for achieving this functionality. There are multiple plugins available in the WordPress library and I tried many of them but one plugin that works best with the Block Editor is WordPress Slider Block Gutenslider because you can add almost any Gutenberg block in your slides.

Now let’s see how we can use this plugin to create various types of slides in Gutenberg Block Editor

Install the Plugin

So the first step is to install the plugin and that is pretty simple just go to your dashboard navigate to Plugins>Add New and search for GutenSlider you’ll see this plugin as shown in the image above, install and activate it. If you are having trouble with installing the plugin then follow this guide.

Add GutenSlider in Block Editor

The next step is to add the GutenSlider block into our Block Editor, just go to your post or page click on the little plus icon or simply type “/gutenslider” and add the slider block in your editor.

After adding the block you’ll see the option to Media Library or Add Empty Slide. If you want an image-based slider choose images or select empty if you wanna design based on your choice. Let’s try both!

Image Background

So let’s start with selecting images, when you click on media library you’ll be prompted to your media library select the images you want and click on create a new gallery to insert them.

After adding the images a new slide will be created with images and a paragraph field in the center, the slides in the slider almost look like a Gutenberg cover block but it’s a bit different from that.

The structure will be the top-level gutenslider block and inside that gutenslide blocks with an inner paragraph block, repeated based on the number of slides in the slider.
The slide will have a full-size layout with the paragraph in the center, it also has arrows to move the slides and slide indicator.
In the sidebar controls, you get all the options related to the slides, we will discuss about these controls in detail below.

Start Empty

If you choose Add Empty Slide then it will create a slide with no background and centered paragraph. When you start with an empty slide only one slide is added and you can add more slides with Add Empty Slide button available at the bottom, rest of the things are exactly the same as the other option.

Customization Options

Now let’s look at what customization controls we have for this block and how we can use them.

You can use every single block you have in your editor either the default Gutenberg blocks or the third-party blocks inside the gutenslide block so every slide can be different from each other with different blocks and you can add as many as you want.

One neat little trick I wanna share is if you want to duplicate the slide select the gutenslide block and hit Ctrl+Shift+D or choose more options from the toolbar and click on the duplicate. A more ideal solution would be to add a duplicate button next to add empty slide but till its available manage with this trick.

Now let’s look at the customization controls of these blocks.

Gutenslide Controls

First, let’s start with the gutenslide block. In the top bar of gutenslide, we get control to move the slide, change slide position, change inner paragraph block position, and default extra blocks control.

Now let’s look at what sidebar controls we have for the gutenslide, we have control in three categories Background settings, Slide settings, and Advanced controls.

With background settings we can change the background image, we can replace it with color, image, or keep it empty.

If you choose an image as a background you get some extra controls like changing focal point, choosing overlay, and display method chooser.

In the slide settings, you get an option to add a link to redirect users when they click on the slide, you can also choose if you want to redirect users to a new tab or the same tab, and if you want to add an automatic caption for the image you can do that too.

Advance controls only have the option to add CSS and classes and the name of the CSS class for this slide.

Gutenslider Controls

Now let’s see what customization controls we have for the Gutenslider block.

For the gutenslider in the top bar, we only get two controls one is to set the alignment to wide or full, and the second is to edit the gallery means if you have an image gallery you can add, remove, or replace its images.

In the sidebar of gutenslider, we get a lot of controls that are very useful, these controls are divided further into eight different categories; General, Autoplay Arrows, Progress, Lightgallery, Dividers, Spacing, and Advanced.

The general has options for changing animation type, different slide modes, option to change slider height and you can also choose a different height for different device sizes, the number of slides you want to show at once, autoplay toggle, show arrow toggle, show dots toggle, enable or disable keyboard navigation toggle, loop toggle, and fullscreen background slider toggle.

The autoplay category has only one option, a toggle button that lets you pause or play the slider on hover.

The arrows category has an option to choose the style of slider navigation arrows, you can also change its size and color from here.

The progress category is for the control of the slider progress indicator, you can change its size, color, and offset from here.

The lightgallery also has only one option to enable or display lightgallery, one thing to note is lightgallery is only visible in frontend means published or in post or page preview, not in the block editor.

The divider category lets you add an overlay on top and at the bottom of your slider, it currently only has two types of divider, from the sidebar you can choose different dividers for top and bottom, toggle to flip the divider, option to choose the color for the divider.

You can see the divider in action in the image above.

The spacing category will let you add margin and spacing for the slider, you can choose the padding and margin size in pixels or percentage.

A side note: padding and margin feature is one of the key features missing from WordPress and we have recently written a great article on how you can get margin and padding feature for every single block, must take a look at that.

The last sidebar control is Advanced control and it has the typical CSS classes field but also some new toggle buttons that let you hide or show the slider on desktop, tablet, and mobile.

Conclusion

Sliders are one of the most popular and widely used content in modern web design and the ability to use them correctly can enhance your web design drastically. Hopefully, after reading this article you’ll be able to create some amazing-looking sliders using Gutenberg Block Editor.

If you are facing any issues while following this article or have any doubts, suggestions, or questions make sure to share them in the comments below. We will try to respond to them as quickly as we can.