by Raelene Morey on August 9, 2018

What is a Slider? The Ultimate Guide to WordPress Sliders

What is a slider

Sliders. Carousels. Slideshows. No matter what you call them, sliders are an incredibly versatile design tool that allow you to showcase images, video, and other content beautifully and more effectively while maximizing the space on your website.

Whether you need a simple way to display a slideshow of photos on an eCommerce or real estate websites, or want a bold video header with calls-to-action, sliders can help you quickly grab your visitors’ attention.

In this post, we’ll take a deep dive into sliders, using examples from Smart Slider 3, a popular slider plugin for WordPress. We’ll explore what they are, how they’re used, the various kinds of sliders you can create, as well as all the different types of behaviors, elements, animations and effects you can include in your sliders.

What is a Slider?

From classic image slideshows to modern fullscreen sliders, sliders come in all shapes and sizes. Designers love them for their flexibility and the visual elements that make it easy to tell a compelling story. Site owners, on the other hand, love them because they can promote multiple facets of a business within one website component and space.

At their most basic, an image slideshow might contain a series of images, each with its own caption, like this example:

image slider
Simple Image Slider with Caption

But in recent years, sliders have evolved to provide greater functionality and feature beyond simple images and text. Now, you can add video, use layers to combine images, text, and buttons, and even include a mix of elements and animations — all within the same slider.

Let’s take a look at a few modern examples.

Amazon uses sliders liberally throughout its site to promote its products. On the homepage, there’s a slider with featured products, as well as several small sliders below with best sellers.

Amazon homepage slideshow

In this example, Airbnb uses a slider on its homepage to display cities were people can book short stay accommodation around the world:

Airbnb slider

And in this more complex example, Lonely Planet uses a fullscreen homepage slider incorporating navigation and text previews to showcase its latest featured articles:

Lonely Planet slider
These are just some of the big brands using sliders to showcase their best content while maximizing all-important screen space.

But it’s not just big brands using sliders. Sliders are easy to add to any WordPress site, and there are plenty of options out there, particularly for WordPress users.

How Do Sliders Work with WordPress?

Adding sliders to your WordPress site is as easy as installing and activating a plugin, and then using the provided visual builder to design your slider.

There are many WordPress slider plugins available, which allow you to create sliders and add them to any page or post on your site. You can download free slider plugins from WordPress.org. Below, you’ll see Smart Slider 3 is the highest rated slider plugin for WordPress:

WordPress Sliders

There are also many premium slider plugins available for WordPress, such as Smart Slider 3 Pro and Revolution Slider, the latter of which is packaged with many ThemeForest themes.

Typically, free slider plugins offer only basic features, such as the ability to create image sliders with captions and simple transitions. When you upgrade to a premium slider plugin, you can start building more complex sliders using layers, images, text, videos, CTAs, animations, and more.

Smart Slider 3 Icon
Bring Your Ideas to Life
Powerful. Visual. Intuitive. Smart Slider 3 is the most advanced slider and block creation tool for WordPress and Joomla.

Types of Sliders

There are several different types of slider, each of which provides the structure for a slider, on top of which you can add other elements. These are the types of sliders you will find in Smart Slider 3:
Slider types

  • Standard – Also known as a slideshow, this type of slider enables you to display several images, one at a time.
  • Carousel – This type of slider displays two or more images at a time, which users can cycle through.
  • Showcase – This type of slider lets you put the focus on one image, but also give a sneak peek at other images in the series.
  • Accordion – Accordion sliders fan out like an accordion when you click each image.
  • Block – A content block features just one slide but can include many different elements (text, image, video, etc), animations and effects.

Types of Slider Behaviors

In addition to slider types, there are different slider behaviors that determine how a slider type will look on a web page.
Slider behavior

  • Default – This is the most typical type of layout you’ll come across on the web, such as an on eCommerce site displaying product items.
  • Full width – Display a slider across the entire width of a page.
  • Full page – This fullscreen layout fills the entire page above-the-fold.
  • Bar – Use this layout to display a bar at the bottom of the slider for text and captions.
  • Accordion (horizontal and vertical) – For accordion sliders, you can choose whether to display images horizontally or vertically.
  • Thumbnail (horizontal and vertical) – Display thumbnails for your series of images (or other content) either horizontally or vertically.

Working with Slider Layers

Free slider plugins (with the exception of Smart Slider 3) allow you to create only basic slideshows using images and text. Premium slider plugins, on the other hand, let you design to your heart’s content with layers.

Layers are basically content building block that you can add to sliders to create more functional, beautiful, and complex designs. Similarly, Photoshop and other image editing programs use layers to enable users to stack and work with different types of content.

The most basic layers you’ll find in premium slider plugins include: Headings, Text, Images, Buttons and Videos (YouTube, Vimeo, and self-hosted).

Some premium and advanced sliders may also offer other types of content layers, such as: Icons, Lists, Captions, Image boxes (and image areas), Transitions, Progress bars, Counters (and circle counters), Audio, Text areas and iFrame.

The best way to fully understand how layers work is to see them in action. Check out the video below to see how layers work in the free version of Slider Slider 3.

Adding Animations and Effects to Sliders

You’re probably familiar with the default right to left slide background animation that many images slideshows use when transitioning through images. But what’s exciting about working with sliders is that there are many more awesome animations and effects you can use to add both bold and subtle effects to your website.

Background Animations

Whether you want to fade, rotate, zoom, or have your images metaphorically explode, there are dozens of different background animations you can use for transitions between each slide.

Layer Animations

Similar to background animations, layer animations enabled you to animate particular layers in your slider, such as the button animation below.

Ui designer.
I Am Peter.
Hello.
Ui designer.
I Am Peter.
Hello.
Ui designer.
I Am Peter.
Hello.
Ui designer.
I Am Peter.
Hello.
Ui designer.
I Am Peter.
Hello.
previous arrow
next arrow
Slider

Text Animations

With this kind of animation, you can animate your words and bring text to life as a chain of lines, words, or characters.

Hello.
I Am Peter.
Ui designer.
Hello. I Am Peter.
Ui designer.
I craft simple & clean design solutions for web & mobile.
Hello. I Am Peter.
Hello. I Am Peter.
previous arrow
next arrow
Slider

Ken Burns Effect

Make your slides pop with this elegant zooming and panning effect, invented for film. A simple way to give your images the illusion of motion.

previous arrow
next arrow
Slider

Parallax

Add depth to your sliders—or, at least, the illusion of it—with parallax. Parallax images move at different speeds and create an optical illusion of depth.

Parallax Slider Example

Animated shape divider

Add moving curves, clouds, and diagonal shapes to your sliders with an animated shape divider effect.

shape divider
Animated Shape Divider Example

Particle effect

Stunning yet deceptively simple. Using the particle effect allows you to add moving shapes and lines, dots, triangles, and polygons that follow the cursor

particle slider
Particle Effect Example

Creating Sliders: Features and Functionality to Look Out for When Choosing a WordPress Slider Plugin

Now that you’ve got a basic understanding of the different types and behaviors of sliders, as well as layers, animations, and effects, it’s time to look at some of the advanced features you can expect to see in reputable WordPress slider plugins.

From different types of content and dynamic elements to performance and optimization capabilities, these are the features you should look out for when choosing a quality slider plugin.

Visual Editor

Every good slider plugin should come with a visual editor that allows you to design each individual slide, much like how you would with Photoshop and other image editing programs.

Visual editor allows you to drag-and-drop layers, change fonts, sizes, colors, add animations and effects, and generally manipulate the content in your slides to look exactly how you want.

Smart Slider 3's Admin Interface
Smart Slider 3’s Admin Interface

Layers and Customization

Imagine if Photoshop didn’t have layers? It would be difficult to design and edit images, right? Surprisingly, many slider plugins don’t use layers. Without them, you’re severely limited in how you can design your plugins.

Layers allow you to create content-rich sliders, which might have various images, text, video, and other elements layered together to form one interactive slide.

When choosing a slider plugin, make sure it includes the most basic layers (headings, text, images, video, and buttons), as well as any advanced content you might need, such as icons, audio, lists, and counters.

Live Preview

Like any software, live preview allows you to quickly see every change you make in real-time. For example, after updating an image or adding a text layer or transition, you can click ‘Preview’ to quickly preview your changes and see what your slider looks like with all over your layers, animations and effects working together.

Dynamic Content

You aren’t limited to adding just static images, video, and text to your slides. Some slider plugins, like Smart Slider 3, allow you to populate slides with dynamic content, such as WordPress and Joomla blog posts, YouTube playlists, and even products from your WooCommerce site.

This means you can dynamically display content, such as your eCommerce store’s best-selling products, your latest blog posts, or even new video additions to your YouTube channel.

Product slider
Product slider

Page Builder Compatible

If you’ve built your site using a page builder, such as Elementor, Beaver Builder, Divi, Site Origin or WP Bakery Page Builder, be sure to check that any slider plugin you choose is compatible.

Responsive Design

Ensuring that your site design is responsive is crucial now that Google has moved to mobile-first indexing. So choose a slider plugin that provides responsive design out-of-the-box.

Some sliders, like Smart Slider 3, provide device-specific settings for desktop, tablet and mobile. This means your sliders will automatically adjust for different devices. You can choose to enable features like tilt and swipe, or simply turn off sliders for particular devices.

Responsive slider
Responsive content in Smart Slider 3

Support and Updates

Premium slider plugins should always come with priority support, so if you run into any issues you can get in touch for help. Support generally doesn’t come with free slider plugins, though you can use the WordPress Support Forums if you have any questions.

Keeping your slider plugin up-to-date is also important for security and performance, and so you can upgrade to receive new features.

Speed and Performance

There’s a common perception that sliders negatively impact website performance. Often, people add images to sliders that are too big or haven’t been optimized. So if a slider plugin further impacts performance, it’s a double whammy for page load speed.

It’s important that your slides load immediately but don’t slow down the loading of your pages, so look out for slider plugins that offer image optimization and lazy loading. Both of these techniques will help your slides load quickly. Likewise, script optimization is another feature you’ll come across in premium plugins like Smart Slider 3 Pro.

SEO-Friendly

When you’re adding different types of content such as images and video to your sliders, it makes sense to leverage it for SEO, right? So when choosing a slider plugin, make sure it’s been designed with SEO in mind and its HTML structure follow SEO best practice. This will ensure your individual slides—along with the alt text you have entered for your content—ranks in search.

Developer-Friendly

If you want even more control over the design of your slides, look for a slider plugin that’s developer-friendly and allows for custom code within slides, but also allows you to edit external files for customizations like animations and effects.

Conclusion

Now that you learned all there is to know about sliders and how they work with WordPress, you’re ready to start creating your own! As I mentioned above, there are some great free options, but I’d highly recommend starting out with Smart Slider 3, which you can download from WordPress.org.

Smart Slider 3 comes with loads of features and options (including everything mentioned in this article and more). Check out these stunning slider examples and download Smart Slider 3 for free to get started.

Raelene Morey

About Author

Raelene Morey is the Chief Bird at Words By Birds , an agency that helps WordPress businesses make better content. Computer science grad turned newspaper journalist and ex-managing editor at WPMU DEV. Raelene has been developing WordPress sites for over 10 years.