slider WordPress

If you want to add a slider in WordPress, a slider WordPress block offers the easiest way to get started.

In this step-by-step tutorial, you’ll learn how to add a slider in WordPress using the free Otter Blocks plugin. You can be up and running in just a few minutes, but the plugin also gives you lots of options to control how your slider works if needed.

👉 Here’s an example of what you’ll be able to create – keep reading for the full tutorial!

Different options for how to add a slider in WordPress

There are several methods on how to add a slider in WordPress:

  1. Use a slider WordPress plugin: Free plugins like Otter Blocks provide built-in slider blocks made just for WordPress.
  2. Try a page builder: Some page builders offer pre-made sliders to add as content blocks or sections.
  3. 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.
  4. 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.

Therefore, we’ll teach you how to add a slider in WordPress with a highly versatile Gutenberg blocks plugin called Otter Blocks.

How to add a slider WordPress block via Otter Blocks – quick guide

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.

Then, in the next section, we’ll go into more detail about the different options you have to customize the slider WordPress block in Otter Blocks.

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:

  1. Open your WordPress dashboard.
  2. Go to Plugins > Add New.
  3. Search for Otter Blocks.
  4. Install and activate the plugin.

Step 2: Add the slider WordPress block to the relevant post or page

Next, open the WordPress editor for the post, page, or other type of content/template where you want to add your slider.

Then, open the block inserter and search for “Slider.” Select the Slider block to add it to the editor.

⌛ Note: The preview of the block tells you if it’s the slider option from Otter.

Clicking on the slider block

Step 3: Add media to the slider

Once you’ve added the Slider block to your design, it gives you two options to add images to your slider:

  1. Upload – upload brand new images to your slider.
  2. Media Library – choose existing images from your Media Library.
Uploading or choosing the media library for a slider in WordPress

You can upload or add as many images as you want to the Slider block. Once you’ve done that, the Slider block reveals a preview of the images with sliding animations included.

⌛ Note: It’s always possible to go back in and either delete or add more images to a slider.

Uploading images

Step 4: Publish the slider to your WordPress 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.

Clicking the update button

Step 5: View the slider on your WordPress frontend

To make sure the slider WordPress block is working as you intend it to, navigate to the frontend of that page or post to view the results.

The default settings from Otter Blocks provide autoplay functionality, navigational bullets, and clickable arrows.

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 WordPress block in Otter Blocks

If you want more control over how the slider WordPress block functions, Otter Block gives you lots of options in the Block sidebar of the editor.

Here’s how to customize the slider…

Step 1: Select the Slider block to reveal more settings

On the backend of WordPress, click on the Slider block; this should create a highlight effect around the module. Go to Settings > Block on the right side of the screen. Here’s where you modify design settings.

Bringing up the settings for a slider in WordPress

Step 2: Customize the slides

Under Block > Settings, you’ll find numerous customization options.

Start in the Slides module to edit the number of Slides Per Page and the Gap between slides.

Slides per page

You might try adding to the Peek setting to reveal slides about to appear in the gallery.

Using the peek setting for a slider in WordPress

The settings also include toggles to Hide Arrows and Hide Pagination, which you can use based on personal preference.

Hiding arrows

Step 3: Adjust the image order if needed

Open the Images tab to see all media items currently inside the slider. Here, you’re able to click and drag to rearrange the order.

From this area, it’s also possible to delete and add images.

Step 4: Toggle autoplay settings

Under the Autoplay section, there’s a toggle to activate or deactivate the slider autoplay functionality on your WordPress slider.

Turning off autoplay

When you enable the toggle, you have the option to delay the slide transition by several seconds.

Choosing a delay for autoplay

Step 5: Add style to the slider

Moving on past the general settings, click on the Style tab to edit things like dimensions, colors, and borders.

Clicking the style tab

The Dimensions and Motion panel has fields to type in a set height or width for the entire slider. Keep in mind that you may have to play around with the dimensions to achieve the desired look. Having a locked height or width could also affect its responsiveness on other devices.

There’s even a Transition field to pick creative movements as slides change.

Options include:

  • Linear
  • Ease
  • Ease In
  • Ease In Out
  • Bounce
Setting the height for a slider in WordPress

To add a slider in WordPress with some color, open the Color section. Here, you pick the elements for which to change their colors. You can add color to arrows, arrow backgrounds, pagination, active pagination, and borders.

Going to the color tab

Click on the circular color swatch from each one to bring up a color selector. As you make changes, you’ll see them instantly apply to the preview in the editor.

Setting a color for a slider in WordPress

The final style customization available for an Otter Blocks slider is its border. Choose the Border tab, then type in a certain number of pixels for the border width and radius. The radius rounds the border corners.

Adding a border to a WordPress slider

Step 6: Switch to a wide width or full width slider

One of the last settings worth adjusting for a WordPress slider is its width on the page. WordPress themes generally have a preset content width, but you may want to override that for the slider to take up more space (assuming your theme supports these width options).

On the WordPress editor, click to select the Slider block. Pick the Align button that shows up. You’ll see a dropdown menu with three alignment options:

  • None
  • Wide width
  • Full width
Changing a WordPress slider to full width

The wide width alignment stretches your slider across most of the page, leaving some space at the edges.

The full width version

On the other hand, full width expands the sliders to touch the very ends of the page to fill up all horizontal space on the screen.

A slider on the frontend with border and red colors

How to show/hide the slider WordPress block for different users with visibility conditions

A visibility condition is a rule you set within Otter Blocks so that certain slides only show up at specific times, like if a user is logged into the site, or based on a customer’s purchase history.

These are powerful elements for delivering targeted messages, and to minimize redundant images for others.

To begin, select the Slider block in the editor, and go to its Block tab. Click the kebab icon (three vertical dots) for the Block Tools tab. This reveals extra tabs to activate in the block settings:

  • Animations
  • Custom CSS
  • Visibility Conditions
  • Transform to Sticky

For this situation, select the Visibility Conditions option.

⌛ Note: Animations don’t work for Slider blocks (that feature is for other blocks that come with Otter).

Visibility conditions for a slider in WordPress

Click to Add Rule Group.

Adding a rule group for a WordPress slider

Find and click the downward carrot icon next to where it says Rule Group. That prompts you to select a Condition for the rule group.

There’s a long list of conditions to display the block if the condition is true.

Choose from the categories:

Selecting conditions in a rule group

As an example, you might only show a slider to logged-out users, meaning the logged-in users see nothing, or another slider you set up for them.

Set multiple conditions in one rule group, so the slider only appears when both conditions are met.

Picking a condition for a WordPress slider

There’s a big difference between adding a new condition and adding a new rule group:

  • Sliders with multiple conditions only appear if the first condition AND the second one are met.
  • Sliders with multiple rule groups get displayed if the first rule group OR the second rule group is met.
Differences between rule groups and conditions

While setting conditions and rule groups, be sure to offer multiple sliders with different visibility rules so that all users see a relevant slider!

How to set sticky sliders and custom CSS

The remaining tools for Otter sliders include: Transform to Sticky and Custom CSS. Remember, animations aren’t available for sliders.

If you want to, you can activate both under the Block Tools dropdown menu.

Clicking on the block tools

Sticky sliders allow you to keep the slider in one place while users move around your website. This is helpful if it’s an important message or if it works well for the aesthetic of the page.

Here are the sticky settings:

  • Set the slider to stick to the screen
  • Activate float mode
  • Change its position
  • Choose an offset
  • Add sticky behaviors like collapse, fade, and stack
Making a slider sticky

Custom CSS, on the other hand, lets you add a slider in WordPress and customize it however you want – assuming you know how to code. Simply type or paste code into the Custom CSS block and use “selector” to target the block wrapper.

Using custom css to add a slider in WordPress

Add a slider WordPress block today 🚀

That wraps up our guide on how to use a slider WordPress block to add a slider directly from the WordPress editor.

For most people, all you need to do is add the slider WordPress block to your design and upload some images.

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 WordPress block? 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%. 🚀

Free Access

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (itโ€™s free)!