Block editor series – MetaSlider

Sliders are a great way to capture the reader’s attention. You can easily feature anything you want to promote whether it is content on your site, products you sell or services you offer. In this article we will check out the process of creating a slider and using a custom block to embed it in our content.

The plugin

MetaSlider is a free WordPress plugin which allows you to easily create responsive and SEO ready slideshows in a matter of minutes. The plugin offers a variety of customization options like transition effect, speed and more through a simple and easy to use interface, it also comes bundled width some pre-built themes which will give a more professional appearance to your slideshows.

Installation

MetaSlider is available in the WordPress plugin directory. To install it navigate to Plugins > Add New, search for MetaSlider and click the install button. Once the installation finishes click activate to enable it.

The plugin only has a few global options which can be accessed under MetaSlider > Settings.

These options allow you to set  a default name for new slideshows, base image width & height and enable full width sliders.

Create your slider

To get started just navigate to the MetaSlider tab on your WordPress dashboard.

Here you can either drag & drop some images into the box to start the process or click the Create blank slideshow button. We’re going to do the latter.

The first thing you need to do is add a title for our slider.

Do that and then click the Add Slide button on the top right to add your first slide. Once you click the button the WordPress media manager will pop-up providing you with a familiar interface where you can upload photos from your PC or use existing ones from the WordPress media library. Here you will also find an interesting feature bundled with MetaSlider, the access to the Unsplash image gallery.

The plugin allows you to browse the popular royalty free image hosting site right from the media manager and use your favorite free stock photo without ever leaving your dashboard. Rinse and repeat for the rest of your slides.

Once all the slides are added you can fine tune them by modifying each images caption, title and alt texts and the crop position.

You can also select which slider you are going to use, set the slideshow base image size, toggle navigation arrows and dots and pick a theme for the slideshow. To do that just click the Select a custom theme link.

You will be presented with a pop-up featuring the available custom themes, pick your favorite, preview it and select it for your slider.

Finally, if you wish so, you can mess around with the slider’s advanced options which control timings, direction, crop, effects and more.

Your slider is ready, click the Save button on the top right and you are good to go.

The MetaSlider block

Adding the slider you’ve just created in the content is pretty easy with the help of the bundled custom block.

To utilize it search for MetaSlider in the block selector and click on the block.

Next select your slider from the drop down.

That’s it, the slider was added to your content. The preview won’t have the same layout (i.e. custom theme) as the published post, so let’s publish the post and check it out.

The slider

The slideshow in the final published post will have the custom theme applied to it.

Wrapping up

Unfortunately the core blocks do not include a slideshow one yet, but through the magic of third party plugins creating and embedding a slideshow in our content is child’s play. In a few short minutes we have created and added to a post a slideshow with a custom theme and some royalty free stock images.