by Raelene Morey on February 7, 2019

16 Inspiring Examples of Stunning Modern Homepage Sliders

Modern Homepage Sliders

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

Homepage Product Showcase

🎓 Available in the Smart Slider 3 ProHomepage 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

Free Gradient Slider

🎓 Available in the Smart Slider 3 FreeFull 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

Home of the Arts slideshow
Home of the Arts slideshow

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

Squarespace Full Page Slider
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

Agency Slider group

🎓 Available in the Smart Slider 3 ProAgency 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

Homepage Slideshow at Microsoft
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 slideshow
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 Homepage
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

Static Slider

🎓 Available in the Smart Slider 3 ProAutoplaying 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

Lonely Planet’s slider with high quality photography
Lonely Planet’s slider with high quality photography

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

Layer Slider

🎓 Available in the Smart Slider 3 ProLayer 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

Hero Slider at Lamborghini
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

The English Bus homepage video slider
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

Broken Grid Slider at Smart Slider 3

🎓 Available in the Smart Slider 3 ProBroken 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

Fashion Slider with Smart Slider 3

🎓 Available in the Smart Slider 3 ProFull 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

Fullwidth Slider

🎓 Available in the Smart Slider 3 ProColorful 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.

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.

Conclusion

Sliders are dead, long live sliders! But seriously, gone are the boring, ugly and hard-to-use sliders that were around five years ago. Modern sliders using 2019 design techniques are stunning. They use optimized high quality photography and elements that were just not possible to implement back in 2013, such as complex previews and advanced accessibility, layering and animations.

I hope the examples above that inspired you to explore what’s possible with homepage sliders. For more impressive homepage slider examples, don’t forget to check out our Example Sliders.

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.