Homepage sliders are back! Or, should I say, they never left in the first place. If you’d believe the anti-slider brigade, homepage sliders are boring, annoying and bad for conversions. But the actual evidence proves otherwise.
Modern sliders have evolved beyond the basic slideshows that were everywhere five years ago. Big brands like SpaceX, Microsoft, Squarespace and Spotify feature well-designed sliders on their websites. Contemporary sliders are gorgeous. They feature stunning imagery – usually high resolution photography – along with thoughtful copywriting, well-placed CTAs and design elements that ensure information is well-timed so users can absorb the content on each slide.
Why use a homepage slider on your WordPress site? The many benefits include:
- Focus. The ability to focus users on your key messages above the fold.
- Visuals. Users love stunning imagery. Sliders let you display more than just one image.
- Calls to action. Sliders provide opportunities to display multiple CTAs for your important content.
Let’s take a look at some examples of how big brands and creatives are using homepage sliders.
1. Homepage Product Slider Example
🎓 Available in the Smart Slider 3 Pro – Homepage Product Slider Example
You wouldn’t think this is a slider, but it is! As you scroll down the page, each page animates, displaying a different fullscreen background color, varied images, text and a final prompt to download the app from the Apple App Store. It’s a simple concept with (literally) so many moving and animated parts.
Why it works: The animations work in harmony together, come after each other. It makes the slider clean and modern. This isn’t a traditional slider, you can use it even by itself on your homepage. The scroll down animation helps the visitor navigate and check more information and details about your product.
2. Full Width Gradient Slider
🎓 Available in the Smart Slider 3 Free – Full Width Gradient Slider
In the Smart Slider 3 template library you can encounter that free beautiful slider template. It is a simple way to show the most important information with a heading, a short text, a button and a simple image. There are more opportunities to navigate to other slides, you can use the bullets and arrows, or just navigate with a mouse drag. The gradient background makes it colorful and fills the 100% width of your page.
Why it works: The slider is simple and makes the first good impression if you use it at the top of your page. It is mobile friendly and looks fine on every device. It is not too much and only contains the important information, it is also easy to customize.
3. Home of the Arts Showcase
HOTA goes back to basics with its homepage slider, which features a whopping 13 images promoting upcoming events, artists and collections. The visuals a little out of the ordinary, forcing users to double-take. The navigation doubles as a sneak peak of what’s coming next in the slider, teasing the user to click to the next slide.
Why it works: It might look like a basic slideshow slider, but the previews behind the arrows tease the viewer to find out more and check out the next slide. This technique helps inform the reader that there’s more to see beyond the first and second slides.
4. Squarespace Full Page Slider
Let’s kick off with my all-time favorite full page slider. I’m a big fan of the Squarespace website, mostly because of the stunning slider that sits at the top of the homepage. It’s beautifully designed, features thoughtful copy and a fun imagery. When you move your mouse to the left or right edges of the slider, it transforms into an arrow for navigation.
Site owners should take note of the CTA – its black background contrasts sharply with the pastel pink background, quickly drawing the user’s attention.
Why it works: This slider is beautifully composed. It’s obvious a lot of time and design has been put into this slider, with each of its elements working together in harmony. It’s a great example of a slider that takes the concept of slideshows to a whole ‘nother level.
5. Agency Landing Page
🎓 Available in the Smart Slider 3 Pro – Agency Landing Page
Can you believe that with sliders you can create a whole page? Just imagine that you put sliders under one another, and use them as a landing page like in the Agency template. Use events to navigate to other slides, and you won’t have problems with the responsiveness neither. This slide group is clearly inspired by the idea of building, and the technological side of online presences.
Why it works: The sliders are passing to each other and are in harmony. On the top there is a simple navigation with links where you can scroll to another slider. All you need is a minimal template, then customize the sliders and use it in a simple way.
6. Homepage Slideshow at Microsoft
Microsoft sticks to basic design principles with its homepage slider. It features only two slides with light and dark imagery, contrasting typography colors and simple, prominent CTAs.
There are two things I really like about this slider – the pause button and its accessibility. The pause button provides a simple indication that you can stop the slider at any time. Meanwhile, tabbing through the elements of the slider lets you easily control the slider with your keyboard.
Why it works: It’s clean, simple and with the two dots at the bottom, users can quickly see there are two slides. Plus, extra brownie points for its focus on accessibility.
7. Spotify Slider
Spotify keeps it simple with a slideshow that retains the same background image for each slide, but displays different text and CTAs as you scroll. The CTAs are bold and green, helping to direct users to the desired next action, while the navigational arrows make it easy to see the next slide. The bright colors are eye-catching and on-brand with Spotify’s style.
Why it works: There’s nothing confusing about this slider – Spotify wants you to click the green CTA and learn more. It’s simple, bold, and helps steer users towards signing up for a premium account.
8. Homepage Slider at SpaceX
SpaceX blends powerful photography with exciting video for this slider, which draws in users to click through to view each slide and learn more about the space company’s work. Each slide is accompanied by a text preview underneath, which users can click to navigate through the slides.
Why it works: This fullwidth slider allows SpaceX to share images and news of its current activities, as well as video of its launches – a combination it wouldn’t be able to achieve with other design techniques.
9. Autoplaying Static Slider
🎓 Available in the Smart Slider 3 Pro – Autoplaying Static Slider
The fullscreen slideshow with a static text and varied backgrounds is an eye catching way to display your information which can attract people. The static slide is always above the other slides which moves behind it. In this case the layers will get more attention because they are always visible. And the autoplay indicator shows you that the slider is live and something will happen.
Why it works: A static slide is always visible and you should create it once. This is a good way to show your logo or watermark but it is a good way to put a text there which needs attention. And the autoplay with the animation in the background makes it more noticeable.
10. Lonely Planet Homepage Gallery
What do you do when you have too much high quality photography to choose from that you can’t pick just one for your hero header? Use a homepage slider.
Lonely Planet’s slider scrolls between tropical waters, snow-covered peaks and waterfalls, enticing travellers with each slide. Like the SpaceX slider above, it uses text previews to inform users of what is on each slide.
Why it works: What I really like about this particular slider is that it’s truly fullscreen. Each image covers the page, with the company logo, header navigation and even the site’s search bar overlaying the top of the slider.
11. Layer Slider Example
🎓 Available in the Smart Slider 3 Pro – Layer Slider Example
Everyone loves fancy transitions on their website, they help catch the visitors attention. The goal of that slider is to call the visitor to an action, the buttons and icons are waiting for a click. It is important to have a visual harmony among the layers and the background, this makes the slider complete.
Maybe it looks easy to put layers one another. However, if the contrast between the layers and the background isn’t enough, you can use a gradient background overlay to add a color to your slider, like in this Smart Slider example.
Why it works: The animated heading attracts the eye and the visitor will click on the buttons and icons. The last slide is my favourite, there is a background video with a HTML layer which contains a contact form, and gets the visitor to do something.
12. Hero Slider at Lamborghini
Lamborghini uses a high-resolution imagery to show off its cars on their homepage. An image of a car is good, but an autoplaying showcase of luxury sports cars is even better. It creates a visually stunning cinematic experience for the visitors.
Why it works: It’s simple and works because it teases users – you know there’s another luxury and beautiful car image coming up and you want to see what it is.
13. Video Showcase of The English Bus
Now, this is a slider you really have to see in action to get how it works, so click through to check it out in all its video glory. How do you get travellers excited about touring England on a bus? With this ingenious video slider.
The English Bus company’s fullscreen homepage slider features scrolling video snippets of the English countryside and well-known tourist spots like Stonehenge. It features white headers and text, which pops against the dark overlay that’s been applied to the video. The bright red CTA also stands out, helping to direct users to view more information about tours.
Why it works: This slider proves why the myth that sliders make websites slow is just plain wrong. As soon as The English Bus website starts loading, the video is already in action, displaying dynamic images of people enjoying the company’s tours. With some smart optimization, sliders provide a fast and effective way to display homepage content.
14. Broken Grid Slider
🎓 Available in the Smart Slider 3 Pro – Broken Grid Slider
This stunning slider is a new addition to the Smart Slider 3 template library and while it looks simple at first, there are quite a few different design effects going on. For a start, it has a broken grid layout, which has become a popular website trend in recent months and is unlikely to disappear anytime soon. When you hover over the slider, it shifts using a delightful parallax effect that will bring your static images to life. Then there’s the white shape divider in the background that helps makes the images pop. On top of all that, there are lots of controls for sliding through the images: navigational arrows, bullet controls at the bottom, and you can also click and swipe.
Why it works: The layer parallax gives a special effect which you can’t encounter on every second website. It makes the slider unique, and with the broken grid layout your site will have a modern look. This slider can be a good hero slider on the top of your page.
15. Full Page Fashion Slideshow
🎓 Available in the Smart Slider 3 Pro – Full Page Fashion Slider
What I love about this slider is that it’s a perfect example of what you can achieve with great photography, well-chosen slider elements, and thoughtful design. The primary focus of each slide is the transparent image to the left, but behind each of the models is a fixed shape with a subtle parallax effect. The heading, text and CTA give visitors clear direction on where to click to buy. There are also plenty of controls available to move through the slides, including navigational arrows on the left, numbers on the right (which also indicate how many slides there are), and a thumbnail of the next image in the slide so visitors know what’s coming up next.
Why it works: Every layer has their own role, the heading draws the visitors’ attention, the arrows and numbers help to navigate and the thumbnail shows what is on the next slide. The buttons can be used as call to action elements, by which you can give the visitors something to click on and navigate to another page.
16. Colorful Full Width Slider
🎓 Available in the Smart Slider 3 Pro – Colorful Full Width Slider
This colorful slider is one of the best examples for a fullwidth slider. The layer parallax effect with the highlighted heading makes the slider powerful and awareness-raising. With that highlight you can focus the most important part of the slider. The colors are in harmony and the heading is more readable because there is a strong contrast between the color of the heading and the background.
Why it works: With the animated highlight the visitor can focus on the most important message what you want to highlight, but the CTA buttons are the main part of the slider too. Clicking on them makes a few more layers show up with a nice animation, and shows more information about your project.
Creating Your Own Beautiful Homepage Slider with Smart Slider 3
With Smart Slider 3 you can easily create beautiful home page sliders. If you like any of the Smart Slider examples above, you can use them — just import them into your WordPress install when you sign up for Smart Slider 3 Pro.