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.
Get on board! Join our 62,416 subscribers!
Get our latest news, tutorials, guides, tips & deals delivered to your inbox.
No spam. No charge. Just curated emails.
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:
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.
In this example, Airbnb uses a slider on its homepage to display cities were people can book short stay accommodation around the world:
And in this more complex example, Lonely Planet uses a fullscreen homepage slider incorporating navigation and text previews to showcase its latest featured articles:
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:
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.
Bring Your Ideas to Life
Powerful. Visual. Intuitive. Smart Slider 3 is the most advanced slider and block creation tool for WordPress and Joomla.
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:
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.
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.
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.
Similar to background animations, layer animations enabled you to animate particular layers in your slider, such as the button animation below.
I Am Peter.
I Am Peter.
I Am Peter.
I Am Peter.
I Am Peter.
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.
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.
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.
Animated shape divider
Add moving curves, clouds, and diagonal shapes to your sliders with an animated shape divider 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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.