21 Excellent Examples of Sliders in Web Design

By / Jun 6, 2011 / Inspiration
shares

A while back we showcased here a list of 30 Inspiring Examples of Slideshows in Web Design and we also had a post showing 13 Super Useful jQuery Content Slider Scripts and Tutorials. Slideshows and sliders are really interesting elements for organizing and showcasing content. They are not only used for images but also for general content and website navigation. So check out these examples and get some inspiration for how you might use a slider in your next project.

Filtered – A Portfolio WordPress Theme

Filtered is a portfolio WordPress theme that has a home page slider for showcasing your best work.

portfolio wordpress theme

Mark Dearman

An example of HTML5 website using an elegant and beautiful layout and image slider. Use the arrows to navigate and change both images in most of the examples.

slider02

Bitfoundry

HTML5 once again. Beautiful textured background, nice color scheme and image slider.

slider03
slider03a

Bigeye

Once again a beautiful combination of HTML5, nice colors, texture and typography. Clean and elegant arrows to help you navigate the images.

slider04

Stiff Rowlands

Simple and straight forward layout and image slider.

slider05

Rodania

Clean layout with elegant arrows to help you navigate the images.

slider06

Buro Maisengasse

Clean layout with a nice color scheme. Arrows at both sides of the page you slide you through the images.

slider07

Mathieu Clauss

Another beautiful example of HTML5 website. Nice and clean image slider that will show the arrows only if you hover the image, if not, the navigation circles on the left side of the image will show you ‘where you are’.

slider08

elless

Great colors, typography and texture. Once again HTML5 and a nice and clean slider.

slider09

Idyllic Creative

Clean layout. A framed image slider where arrows will appear if you hover the image, otherwise they will change automatically.

slider10

Redefine

Nice and colorful HTML5 website. Simple and effective image slider with arrows that help you checking the images in case you don’t to wait for them to change automaticaly.

slider01

Crows Nest

In this clean and minimal design the sliders will help you navigate important tweets about ad/design/tech.

slider11

Escape Module Studio

Nice dark design that allow you to slide sideways to check images and down to check clients.

slider12

Allan Yu

Super clean and elegant HTML5 website. Arrows to navigate the page and also the images.

slider13

Marco Rotoli

Another HTML5 example, here we have sideways arrows to browse projects and image sliders to show project details.

slider14

PTARMAK

Nice and clean horizontal scroller slider. Also a HTML5 website.

slider15

Banneton Bakery

Beautiful layout, texture, images and slider here.

slider16

Saville’s Dovecotes

Clean and minimal layout with “hover” arrow slider on the main image and also slider to navigate products.

slider17

Instrument

Clean, minimal, beautiful and pretty self explanatory.

slider18

CXXVI

Super clean and beautiful layout with a nice and effective image slider.

slider19

Jérôme Détraz

Really cool layout with sliders that help you navigate projects.

slider20

Source:

The Best Designs
Awwwards

About the Author

Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr

23 Comments

  1. Tommy
    June 6, 2011

    Another nice slider based on jQuery library http://creativator.net/projects/jswitch/

    Reply
  2. HTML5Awesome
    June 6, 2011

    Great collection of sliders. Outstanding slider on Marco Rotoli’s site :)

    Reply
  3. bindi
    June 6, 2011

    Nice Collection!

    Reply
  4. Ralph
    June 6, 2011

    The slider from Buro Maisengasse is one of the best I’ve ever seen. Amazing!

    Reply
  5. Snoggle News
    June 6, 2011

    Whoa, awesome gallery! I’m glad to see such a high quality of posts on WDL consistently. I happily share them between networks

    Reply
  6. M
    June 6, 2011

    Thank you very much for the article, really interesting !

    Just a question : do you know some good “full width” sliders ? Especially in blog design ?

    Reply
  7. Tristar Web Design
    June 6, 2011

    There is such a quality amount of designs here. I agree with Ralph, the Buro Maisengasse slider is fantastic. I like Allen Yu, Ptarmak and Savilles is a beautiful site in which the clean slider reflects the overall feel of the website. I will be using these for inspiration for a long time to come.

    Reply
  8. Paul Wallas
    June 6, 2011

    Would you not say these were examples of Carousels without the status indicator? A slider is something you would usually use to determine a start and end point? I may be wrong, just my opinion

    Reply
  9. CT Website Design
    June 6, 2011

    Thanks for the post. I am trying to come up with a design on a new website. cxxvi and Banneton Bakery got my creative juices flowing. Overall all the designs you posted are great, but for some strange reason these 2 really inspired me.

    Reply
  10. Jun Brian A. Jeruta
    June 6, 2011

    it helps!good examples of web design!my inspiration!

    Reply
  11. Ian Harte
    June 6, 2011

    Sweet inspiration here! Sliders look to be the future centre piece for web design looking nice!

    Reply
  12. Ted Thompson
    June 6, 2011

    Great collection. Initially Mathieu Clauss was my favourite but then I discovered Redefine which rocks! Very jealous, I wish our site looked like that.

    Reply
  13. Justin
    June 6, 2011

    Excellent examples! Does anyone know the name of the font used on the Instrument website for the main title and headers?

    Reply
  14. ASpikes
    June 6, 2011

    great collection of sliders!!

    Reply
  15. Buzz
    June 7, 2011

    Excellent collection of sliders… I love the Buro Maisengasse!

    Reply
  16. Angelee
    June 9, 2011

    Awesome MARK DEARMAN! Looks like a playful slider to me but really great slides. Hope I would know how to create sites like these.. esp the html5.

    Reply
  17. Elaine Jones
    June 11, 2011

    Thanks Gisele, these are superb and so inspirational.

    Reply
  18. Patrick
    June 15, 2011

    I’m sorry, but tiny hard-to-hit dots may look pretty, but they’re really, really bad UI design. It tells the user nothing about what’s on the other slides, or why they should click (or wait) to see them.

    Reply
  19. Sian
    June 28, 2011

    What’s happened to graphic design? Some very clever functions which are too fussy and just take your eye away from what you should be looking at. And typography! We all know that web fonts are not the most creative bunch of letters, but sacrificing legibility for the latest cut of a font is not good design!
    Some good stuff too, but lets not lose sight of design.

    Reply
  20. κατασκευη ιστοσελιδων
    January 11, 2012

    very nice slideshows! Thank for the article!

    Reply
  21. Ashok
    August 28, 2012

    great collection of sliders!!

    Reply
  22. melanie
    September 19, 2012

    Your slider collection also look visually stunning to the eye. thank you for sharing. :)

    Reply
  23. Alastair – Slider developer
    May 27, 2013

    The most of slider is content based and truly they are exceptional and looks much compromising then the image sliders. I must say that the concept of using content slider is not dead and here at webdesignledger you people are keeping it alive.
    Thanks for inspiration.

    Reply

Leave a Reply