Sliders & Carousels
Sliders or Carousels are a great way to present multiple images along with messages and quick links to relevant pages in a reduced space on your page. Think of them as a slideshow of your products or services. On a home page, they immediately draw visitors eyes to your best offers, products etc.
There are many ways to make the images and text stand out. As well as a normal slide from 1st to the last image you can fade them in for a smooth transition. The transitions can be timed along with zoom in or out options to really grab attention. The text comes in the form of titles and descriptions to explain the slide along with buttons so the visitor can go straight to the relevant web page.
And provide the customer with a choice, allow the transition to stop on-click or add Arrows and/or Dots to give the visitor navigation control.
The first example is for a Tattooist’s home page. Large banner style slides with key points about the designs and services offered along with buttons to specific pages on their site. They have used a mixture of zoom in and out as well as fade in to make each slide unique furthering the impact.
The next example is a smaller set of slides found on Dougie’s Builders site. In their About page they have added a section to highlight some of their recent projects. Combined with a great animated image it stands out on the page so potential customers can see the quality of the work by Dougie’s team. This time both Arrows and Dots are used for navigation and only the title is displayed to let the images speak for themselves.
Have a look at some of Dougies builder’s recent Bathroom and Kitchen installs
Have a look at some of Dougies builder’s recent Bathroom and Kitchen installs
Another great use of sliders is on full product pages. Why stick with just a main image of the product on a page. Add a slider to show other angles or colours or sizes and even aspirational images and give your potential customers more reasons to choose your product.
The final example shows how a hair stylist demonstrating a special offer on highlights, with the second slide showing off the results. The booking button even has a transitional button affect.
When December ends? The Slider can be hidden on January 1st but bought back to life the following December or at any other time Lynda wishes.
Book in during December for 20% discount
Images can be used as backgrounds to whole sections or columns, into which any widget can be placed from headings and texts through price lists and Call To Actions and Flip boxes. So far we have seen slides are great but there is a limitation to what can be placed over any image; Heading, text and buttons. So to give any section or column background more emphasis we can use slides instead of an image. This means we can use multiple images but still retain whatever functionality we want within that section or column. In the first example, we have a landing page which consists of a full-screen section with multiple slides set to fade in but at the same time we have the Wedding Planner headings formatted consistently within that section.
Images can be used as backgrounds to whole sections or columns, into which any widget can be placed from headings and texts through price lists and Call To Actions and Flip boxes. So far we have seen slides are great but there is a limitation to what can be placed over any image; Heading, text and buttons. So to give any section or column background more emphasis we can use slides instead of an image. This means we can use multiple images but still retain whatever functionality we want within that section or column. In the first example, we have a section with multiple slides set to fade in but at the same time we have the Wedding Planner headings formatted consistently within that section.
Ginny Tanner
Your Wedding Planner
Ginny Tanner
Your Wedding Planner
The next example is how we can add the slide show to an individual column within a section. So now we have a chance to display multiple images, in this case jewellery, around the messages we want to get across. Added to this we can see that the timings can be different in each of the columns so the images are retained for different lengths of time and transitioning at different speeds.
Hand Made Jewellery
By Jade and Ruby
Bespoke items made to order
All our Jewellery is kind to your skin
Hand Made Jewellery
By Jade and Ruby
Bespoke items made to order
All our Jewellery is kind to your skin
In the next example we have created a hero banner for a canine based business. The section is split into two columns, the left side has a sliding background while the right side has the business name and tagline.
In the next example we have created a hero banner for a canine based business. The section is split into two columns, the top has a sliding background while the bottom has the business name and tagline. (note, on desktop the columns are side by side to create the hero banner. On mobile & Tablet, the screen size limit means the columns are one above the other)
WoofTastic
Walking . Day Care . Training . Grooming . Advice & Help
The final example of slideshow based backgrounds is where multiple widgets have been included in the section, a Call to Action and a Button.
The real benefits of using slides in a background are the ability to use any number of widgets and have no constriction to how these are configured and formatted.
The downside, in comparison, is that the slideshow widget itself does allow for different formatting per slide such as individual zoom in/out and background overlay or navigation dots or arrows. So if these are important to the impact of the slideshow then we need to consider whether the pluses of the slideshow backgrounds outweigh the additional individual slide settings of a normal slideshow.
So far we have seen a slide show on any page can add impact. But instead of single slides we can add multiple images onto a carousel. These can look great at the bottom of a page to further reinforce your products or services. In other words images to back up the words. This is particularly effective if you would like to use a lot of images.
The example below shows images from a music studio used to emphasise the services offered to musicians. A lightbox has been added to each image so the visitor can see the larger picture if required. Or a link can be added so that the visitor is directed to the relevant web page.
Or use larger images if portrait. Add in navigation via arrows and/or dots. In the example below Fashionshack have some new items in store so this is a great way to quickly highlight without filling a page with large images
New arrivals at Fashionshack
New arrivals at Fashionshack
Go large with your carousel; use instead of a single image banner or slideshow, add a carousel to the start of a page, or even homepage, to give immediate impact and provide multiple visual messages.
Below Lottie has started her Architecture Gallery page with a carousel of sample photographs she has taken
My Latest Architecture
Showcase
Or take it a step further, change to a “Coverflow” style to highlight the centre image. Add a background, this time with a filtered colouring
Also remember that the sliders and carousels can be changed to suit the type of device being used. So the height, width, number of images or the images themselves can be changed. Especially good if large portrait images that look good on the desktop become impractical if squashed onto a mobile.