How to use content sliders in web design

Jason Amunwa of SlideDeck explains when and how to use content sliders in your website designs.

Content sliders, aka carousels, are ubiquitous in contemporary web design, and for good reason. They are simple to set up, totally customizable to the look and feel of your site, and allow you to showcase creative content in a relatively small footprint. Designers love them because of their flexibility - making it easy to tell a compelling story, and website owners love them because they can promote multiple elements of their business in a simple site element. Done right, sliders look good and bring a visual punch to any site.

Sliders are easy to add to most websites and there are plenty of options out there, particularly for WordPress users. But sliders aren’t always the answer, and for every gorgeous slider there are hundreds of eyesores, or worse, unusable sliders. So when is the right time to use one? We’ve put together a list of the seven best best times to use a content slider.

As the makers of a WordPress slider ourselves, we are constantly on the lookout for innovative implementations of sliders in web design. The next time you’re tackled with one of these challenges, hopefully these examples will inspire you to a creative solution.

  • Read all our web design articles here

01. Product tours

Sliders are made for product tours. When presented all at once, large quantities of information can overwhelm visitors - they're less likely to get distracted if it’s broken down into more manageable pieces. Consider using a slider when information needs to be presented sequentially, like in these product tours.

Sliders in web design: Square

Credit card app Square makes good use of sliders on its website

Consider these two examples. Square (above) is a device used by companies to accept credit cards through smartphones and other devices. Its site uses sliders throughout to explain the variety of ways to use the service and highlight the individual features and benefits.

Sliders in web design: Shoe advisor

Shoe Advisor uses an interactive slider to find the right running shoes for you

Another example is Shoe Advisor (above). This site benefits from an interactive slider that asks you questions about your activity and recommends running shoes based on your foot width, etc.

02. Highlighting new content

Sliders are the ideal device for sites that are regularly updated. If you access your news online each morning, you probably encounter content sliders on a daily basis; in fact, this is one of their most common implementations.

Sliders in web design: Discovery

Discovery.com uses a slider to keep visitors up to date with the latest content

Take a cue from the homepages of popular news and television networks, such as The Discovery Channel (above) and MTV (below). Media sites such as these often rely on sliders to showcase an ever-changing lineup of new and popular articles and videos. They're great for when you want to deliver lots of content, especially video content, that changes frequently.

Sliders in web design: MTV

MTV.com adds new video content frequently, so a slider is ideal for showcasing it

03. Photo galleries

Photo galleries shine in sliders. Sometimes a great image (or several) is all that's required to communicate everything you need to about your brand. Whether it's a handful of full-page high-resolution images or several smaller ones, when you need to display a photo gallery a slider is a great way to do so.

Sliders in web design: Regent College

Regent College's site employs an automatic horizontal slider

To highlight both the natural beauty of its location and the diversity of its students, Regent College (above) uses an automatic horizontal slider with unique design elements as an appealing homepage element.

Sliders in web design: Blind Barber

Blind Barber's website features a full screen slider

A modern twist on the classic barbershop, Blind Barber (above) utilizes a full screen slider to showcase their photo gallery of barbers, hair styles, drinks, to effectively communicate the aesthtic of their brand. A numerical navigation bar below allows users to browse slides.

04. Online portfolios

Because of their utility in showcasing visual content, sliders have become the standard in online portfolios for artists of all kinds, from photographers to graphic designers to web developers. In very little space, sliders allow you to creatively display virtually any type of work to potential clients.

Sliders in web design: Büro Maisengasse

Büro Maisengasse's slider mimics a clothes line

Büro Maisengasse (above) uses one of the most fun sliders yet. Use the arrows to navigate horizontally and projects zoom past as if displayed via a clothes line.

Sliders in web design: Idyllic Creative

Idyllic Creative's slider is simple and efficient

Idyllic Creative (above) uses a simple automatic horizontal slider to display and link to featured projects, with navigation above and contact information below.

05. Ecommerce

Sliders are an excellent choice for showcasing products in ecommerce. Whether you want to display the full range of products, showcase a select few to communicate your aesthetic, or highlight the newest additions to the line, examples of sliders used in e-commerce are plentiful.

Sliders in web design: CXXVI

CXXVI's slider matches the brand's aesthetic perfectly

Clothing company CXXVI's full-page horizontal slider, shown above, uses minimalist navigation to showcase a curated selection of products, successfully communicating the CXXVI aesthetic.

Sliders in web design: Park La Fun

Park La Fun's slider showcases new and popular products

Park La Fun’s homepage above features a fun, full page automatic horizontal slider that showcases new and popular products.

06. Text snippets

Sliders aren’t limited to visual content. They are also handy when you need to display a series of related snippets of texts or communicate some written information about your site.

Sliders in web design: The Barrelhouse Flat

The Barrelhouse Flat's slider draws attention to its drink specials

The Barrelhouse Flat (above) utilizes a horizontal slider to showcase their creative house drink specials. The effect that’s simultaneously old fashioned - like flipping through a drink menu - and totally modern.

Sliders in web design: Heath Waller

Heath Waller's contact page slider acts as an online business card

The contact page for web designer Heath Waller, shown above, functions much like a business card, with a beautiful, minimalist horizontal slider presenting important information and links over images.

07. Storytelling

What sliders are really great at is telling a story. Google uses a slider for their promotional book for Chrome. Some transitions have a whimsical page-turning effect that’s perfect for this medium.

Sliders in web design: Storytelling

Here a slider is used to turn pages in a pseudo ebook

20 Things I Learned About Browsers and the Web (above) utilizes the slider to turn pages of the pseudo-ebook. The function eases users into reading as the text feels manageable in small increments on separate slides.

So there you have it. Seven ways and 15 examples of how sliders can bring your site to life, engage visitors, and create a memorable experience that turns visitors into customers and advocates.

The best way to get started is to browse the examples, then pull up your site and think about the different ways that a slider might give your website content the fresh coat of paint you need to take your site to the next level.

Words: Jason Amunwa

Jason Amunwa is a marketing strategist, designer, WordPress-er, fascinated singulatarian, sci-fi lover & improv comedian, with a dash of UK panache. He's also the director of products at digital-telepathy, makers of the SlideDeck WordPress slider plugin. Join him on Google+ and Twitter.

Liked this? Read these!

Have a favourite slider implementation? Share it with us in the comments. We’re always looking for amazing examples. Added a slider to your site after reading this? Show it off and share it below.