Sliders have long been one of everyone’s most favorite design elements to put on a website. They can showcase content in an original way while not taking up too much vertical space.
Just one question: how to actually add a slider in WordPress? There are a couple of ways, but the easiest one is to use a slider plugin that provides the slider functionality as a WordPress block.
In this post, I show you how that works exactly and how to add a slider to your site.
Different options for how to add a slider in WordPress
There are several methods on how to add a slider in WordPress:
- Use a slider WordPress plugin: Free plugins like Otter Blocks provide built-in slider blocks made just for WordPress.
- Try a page builder: Some page builders offer pre-made sliders to add as content blocks or sections. If you’re using Elementor, for example, then you already have slider functionality built in.
- See if your theme already has a slider feature: We wouldn’t pick a theme just for its slider, but you may find that your current theme has a solid slider feature built in, too.
- Custom code a slider: Unless you need an extremely unique slider, this method isn’t recommended since slider plugins are already highly customizable, and you either have to know how to code or hire a developer.
Using a plugin to add a slider in WordPress is by far the most logical method; it leaves your theme the way it is, and doesn’t require custom coding or an overhauled page building system.
How to add slider to WordPress with Otter Blocks
In this first section, we’ll go over a quick step-by-step guide for how to add a slider in WordPress with Otter Blocks. And then, well go over some more customization options and talk about how to make the slider look exactly like you want it.
Step 1: Install and activate Otter Blocks
To get started, you’ll want to install and activate the free Otter Blocks plugin from WordPress.org:
- Open your WordPress dashboard.
- Go to Plugins > Add New.
- Search for Otter Blocks.
- Install and activate the plugin.
Step 2: Pick if you need a simple image slider or a full content slider
Otter comes with two different slider blocks:
- Simple image slider – this one does what it says on the tin – it lets you pick images from the media library and display them inside a slider
- Content slider – this is a more complex block allowing you to group multiple blocks under each slider, which means that you can slide not just images, but also any other type of content. You can, for example, create a slider where each slide features an image, description, call to action, and a button.
Open the WordPress editor for the post, page, or other type of content/template where you want to add your slider.
Once there, open the block inserter and search for “Slider.” Select the slider block that you want:
Step 3: Using the image slider
Let’s start with the image slider first.
After you add it to your post or page, you’ll be able to either select an image from the media library or upload a new one:
You can select multiple images. Just tick them in the interface and then click on Create a new gallery:
Then, click on Insert gallery to put the slider on the page.
Just like that, you will see your slider ready.
Step 4: Using the content slider
Now let’s use the more interesting content slider.
Again, to add it to the post or page, just select it from the block inserter – just like I show above.
Once added, the slider comes with some demo content:
It comes with 3 slides, each one holding an image and a paragraph underneath.
The best way to add content to the slider is to enter the list view first. There, you will see each slide broken down into its individual elements:
You can click on any of those elements and start editing.
For example, if I click on the first image, I can replace it:
I can also click into the paragraph underneath and enter my own text there:
You can add additional blocks there by first adding them to the page and then dragging them under the specific slide where you need them:
Lastly, to add a slide, just click on the plus icon when the main slider block is selected:
To remove a slide, select an option to delete when selecting the specific slide you want to get rid of:
Step 5: Publish the slider and view on your site
If you’re happy with the look of the slider, click Update or Publish to make your changes live and publish the slider to your live website.
To make sure the slider block is working as you intend it to, navigate to the frontend of that page or post to view the results:
And that’s how to add a slider in WordPress! Keep reading to learn all about adding more advanced settings to the slider.
How to customize the slider
Customizing content slider
If you want more control over how the slider block functions, Otter Blocks gives you lots of options in the sidebar of the editor:
Let’s cover these main settings first:
- Slides per view lets you set how many slides should appear on the same page. Setting it to 1 is probably the best approach in most cases.
- Gap is only useful if you set to have more than one slide per view (it’s the gap between those slides).
- Loop does exactly what it says in the description – it wraps the last slide around so that the view goes back to the first one.
- Autoplay allows you to make the slides switch automatically on a set delay (in seconds).
After you’re done with the main settings, you can switch to the Navigation tab. In it, you can pick if you want to let the user skip to next slide using arrows, dots, or both:
The next tab, Slider Chrome lets you set colors for those arrows and dots:
Another interesting tab is Animations. This one is really powerful. It lets you animate the slider itself. For example, you can choose to make the slider appear with a bounce (among other animations), set the delay of the animation, the speed, and other details of what’s going to happen when a visitor comes to the page:
Lastly, let’s check out the Visibility Conditions tab. This is where you can define the conditions under which the slider is every going to appear. This is not a feature that’s going to be used by everyone, but there are going to be cases when you’ll want for the slider to only appear to a specific subset of your visitors. Maybe you’re running a special promotion, for example.
For example, you can decide to show the slider based on screen size, on whether the user is logged in, depending on category or tag of the post, or even depending on the purchase history of the user if you run an ecommerce site.
For example, if you select “Screen Size” then you will get to pick whether the slider should appear on mobile, tablet, desktop, or any combination of the three:
Customizing image slider
The image slider has many of the same customization options as the content slider presented above.
Apart from those, it also has a couple of additional ones:
First off, it has one more tab called Images:
This one simply allows you to reorder the images in the slider and add new ones.
Then it also has an additional top-level tab – Style:
As you can see, this one lets you set things such as the dimension of the whole slider, the borders or additional color options.
Add a slider WordPress block today 🚀
That wraps up our guide on how to use a slider block in WordPress to add a neat slider functionality directly to your posts or pages.
For most people, all you need to do is add a slider block provided by a plugin like Otter Blocks to your design and pick the content that you want to have in it.
If you want more control, the block also has lots of settings that let you customize how it works.
🛒 If you have a WooCommerce store, you also might be interested in our guide on how to add a WooCommerce product slider 👈 to your store.
Do you still have any questions about how to use a slider in WordPress? Let us know in the comments!
FREE GUIDE
4 Essential Steps to Speed Up Your WordPress Website
Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%. 🚀
