How to create a slider within the block editor with Smart Slider 3
A slideshow is a very effective tool to help you capture the visitor’s attention and promote content, products or services. In this article we will create a custom slideshow and embed it in our post’s content with the help of the Smart Slider 3 plugin.
Table of contents
Smart Slider 3 is a feature packed free WordPress slideshow plugin which can help you create mobile ready and search engine optimized slideshows. It offers pre-built slider templates, dynamic slides, page builder support, font management and more.
Smart Slider 3 is available in the WordPress plugin directory. To install it navigate to Plugins > Add New, search for Smart slider and click the install button. Once the installation finishes click activate to enable it.
After activation the plugin’s options can be accessed under the Smart Slider tab in your WordPress Dashboard.
The welcome tab offers a short video to get you started and also gives you access to the plugin’s global settings page.
From the plugin’s settings page you can control various options, such as automatic update check, enable the enhanced privacy mode for YouTube embeds, customize the mobile breakpoints, change the fonts used and modify the default styling for layer headings, text, buttons and more.
Once you are done with the settings you can head back to the dashboard and get started by clicking the new project button.
Create your slider
You will be prompted to select between starting a slider from scratch or picking one of the pre-built templates as a base for your slider. Let’s create an entirely new slider.
The first screen for your new project will allow you to select the type of project and slider you want to built. You can also name the slider and set its size and layout. Click create to get started.
It’s time to add some images to our slider. Click the add slide button and pick image as the slide source. If you are looking to create dynamic sliders or ones based on posts you can do so from here.
Next you will use the familiar interface of the WordPress media manager to add your images.
After the images are added you can go through the slider’s settings to tailor it to your specific needs.
Using the slider’s settings you can customize the slider’s size, controls, animations, toggle the autoplay and adjust its timings, optimize images by compressing them and many more. When you have customized the slider according to your needs you are ready to save and use it.
If you’d like to utilize a pre-built template you can pick “Start with a template” in the new project pop-up. You will be presented with a selection of ready made slider layouts, some of which are free. Pick your favorite and use it as a starting point. The rest of the configuration is the same as if you were starting from scratch, however if you are using a template most likely you won’t have to mess around with the slider’s settings since these will be preset by the template’s creators.
The Smart Slider 3 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 slider or smart slider in the block selector and click on the Smart Slider 3 block.
Once the block is added click the select slider button and select your slider from the resulting pop-up.
Click insert to add the slider in the content.
That’s it, the slider was added to your content. Finish up your post, publish it and let’s check it out!
Just like that we have created a new slideshow from scratch and added it to our content.
Core blocks do not offer any way to create and use a slideshow yet so third party plugins with their custom blocks come in handy in these cases by allowing us to create beautiful and captivating slideshows for our content quickly and easily.