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 142,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?
The term slider is used for a design element, which is added to a WordPress page to display visual content. From classic image slideshows to modern fullscreen sliders, sliders come in all shapes and sizes. Using the right WordPress slider plugin, it’s easy to create your own sliders.
Designers love sliders 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:
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.
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:
Sliders in WordPress.org’s plugin directory
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.
The new way to build a Slider
Next generation visual editor, customizable animations & effects, and access to hundreads of premade templates.
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.
Block – A content block features just one slide but can include many different elements (text, image, video, etc), animations and effects.
Types of Slider Layouts
In addition to slider types, there are different slider layouts that determine how a slider type will look on a web page. Layouts in Smart Slider 3
Boxed – This is the most typical type of layout you’ll come across on the web, such as an on eCommerce site displaying product items. It makes the slider fit into its container.
Full width – Display a slider across the entire width of a page.
Full page – This fullscreen layout fills the entire page above-the-fold.
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.
Top fade
Hello.
I Am Peter.
Ui designer.
Left
Hello.
I Am Peter.
Ui designer.
Flip up
Hello.
I Am Peter.
Ui designer.
Upscaled
Hello.
I Am Peter.
Ui designer.
Flip left and Left
Hello.
I Am Peter.
Ui designer.
Text Animations
With text animations you can animate your words and bring text to life as a chain of lines, words, or characters.
Mode: Chars
Hello. I Am Peter. Ui designer.
Mode: Lines
Hello. I Am Peter. Ui designer. I craft simple & clean design solutions for web & mobile.
Mode: Words
Hello. I Am Peter.
Mode: Chars
Hello. I Am Peter.
Ken Burns Effect
Make your slides pop with this elegant zooming and panning Ken Burns effect, invented for film. A simple way to give your images the illusion of motion.
Downscale
To bottom
To top right
To left
Upscale
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.
Animated shape divider
Add moving curves, clouds, and diagonal shapes to your sliders with an animated shape divider effect.
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 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
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
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.
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 such as generating smaller images for tablet and mobile visitors and converting the images to WebP for faster load time. The ability to lazy load some of the images is another great feature to have. Both of these techniques will help your slides load quickly.
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 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.
