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.

Experienced Tattoo Artists
Years of experience throughout the team
Meet The team
Classic Designs
Customers return time after time to add to their collection
See What are Customers are Saying
Your Art, your Way
Simple beautiful designs for everyone
See new Range of Designs
Make a statement
Choose a design that reflects your personality
Click Here
Be Brave
Be unique
See Modern Designs here
Previous
Next

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

Crisp white bathroom installed in Marlow
New family kitchen for a customer in Basingstoke
Wet Room and new bathroom in High Wycombe
Spacious and Colourful Install in Windsor
Previous
Next

Have a look at some of Dougies builder’s recent Bathroom and Kitchen installs

 

Crisp white bathroom installed in Marlow
New family kitchen for a customer in Basingstoke
Wet Room and new bathroom in High Wycombe
Spacious and Colourful Install in Windsor
Previous
Next

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.

Natural Highlights at Lynda's Salon
Book in during December for 20% discount
Book Now
Natural Highlights at Lynda's Salon
Book Now

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.

Meet The Team

Click to see more about how our talent can set you on the way to success

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.

Dutch Barn

Sizes Available:
2400mm x 2400mm (8′ x 8′)
3000mm x 2400mm (10′ x 8′)
3530mm x 2400mm (12′ x 8′)

Ridge Height: 2667mm (approx 8′ 9′)

Door: Ledged and Braced

Window: 3 Pane Joinery Opening

Loft: Internally Braced

Additional Options:
19mm Loglap cladding
Tanalised wood treatment
22mm Heavy duty flooring
Stable Door
Heavy duty galvanised door hinges
Security padbolt protector
Safety Glass
Ramp
Heavy duty roof felt
Window boxes (large or small)
Georgian style windows

Dilly's Daycare

Contact Us