Slideshows In Web Design: When And How To Use Them


The key to smart strategic Web design is finding an appropriate and interactive way to display information. One comes upon endless possibilities when searching for ways to display information. One solution, slideshows and sliders, is an excellent way to display information such as images in an organized and compact manner. Slider galleries are excellent for organizing content into a nice clean module.

There are many reasons to use a slideshow or image slider. The slideshow is a universally known tool, and anyone who has used the Internet will know how to work a slideshow. Therefore, they are very usable and convenient for any user, and they can be used almost anywhere.

This article focuses on how to implement the slideshow technique correctly. We will cover when you should use a slider and how to make a good slideshow, and we will showcase good slideshows and content sliders.

Please also consider our previous articles:

When to Include a Slider?

According to our recent review of 2009 Web Design Trends6, slideshows or carousels are becoming more and more popular in modern web designs. Carousels are essentially slideshow navigations, in which the content rotates vertically or horizontally (hence the name “carousel”). To rotate the navigation, users need to click on one of two toggle elements (usually a left/right or up/down arrow). Depending on the toggle element selected, the content is rotated in the desired direction.


Instead of clicking through various sections of the website for their favorite stories, users can quickly skim through the available stories without vertical scrolling or unnecessary mouse movements. The result: users save time, and the carousel focuses their attention sharply on the content, instead of on interacting with the browser. Such slideshow navigation is often used on entertainment websites and big blogs, but designers also make use of it in their portfolios to showcase their work in a more interactive way.

Let’s take a look at some common places where the sliders are often used.

1. Portfolios

When designing a portfolio, there are many different ways to organize your projects. One good way is to use a slider. Using a slideshow to showcase different images from a single project is even more common. Some websites will use it to slide through each project, and each slide brings you to a more detailed description of the project.

2. Slider of Information

Sliders are very popular on home pages of corporate websites. They are very useful for showing important information about a company. Generally, corporations will include an explanation of what the company does, a brief preview of the products, an explanation of what sets their products apart, and many further user options.

Take a look below at the excellent use of the slider technique on This home page slider contains information explaining Mint and what you can do with the service. Also included are graphics, which provide a nice visual to back up the information. This is a very good use of the slider and is extremely convenient for new users on Mint looking to learn more quickly.


3. Featured Blog Posts

Many blogs use slider galleries to feature top posts. It is a great way to show many top posts and not take up too much space. By fitting numerous featured posts into a smaller element, you are allowing more space for other content.

How to Make a Good Slideshow

Although almost every user will know how to work a slideshow, there are still a few ways that you can take it to the next level of usability.

Provide Thumbnails, Numbers or Buttons
Thumbnails are one of the more important elements of a good slideshow. They give the user a sense of where they are in the slideshow and where the slideshow is going. It allows for quick navigation and the convenience of finding a desired slide.

There are many ways to achieve this quick navigation. The first is by providing numbers. Highlighting the number of the current slide is very important. Secondly, provide thumbnails for each slide. Finally, buttons can be useful for even easier navigation.

Make it Auto and Manual
You will notice that many sliders work in one of two ways: they either slide automatically or buttons are provided for the user to click through manually. The best way to do this is to give both options. It is a good idea to have the slider start automatically, but you should still include buttons so that the user can find a certain slide.

Don’t Overdo It
As mentioned, the slideshow is a universally known element, so there is no need to overdo it in an attempt to make it more usable. The main focus of a slideshow is on the content. Only use what’s needed, and avoid using extra buttons and unnecessary features.

Button Placement
The key to a usable slideshow is the buttons. More important is where you place those buttons and how they appear. Buttons should most often be placed directly under or over the slider, or on either side (i.e. “Next” and “Previous”). This is standard practice, and there is no need to do anything different.

Good Transitions
The way the slideshow moves from slide to slide is actually more important than you may think. There are many transition effects that can be used in a slider, such as fading, horizontal sliding, vertical sliding, the list goes on. Try to pick the transition that best captures the style of the website. For example, if you have a very minimal design, you will want to go with a subtle fade that matches the style.

Border and Button Styling
There are not too many styling options within the slideshow itself, but there are a number of ways to style the space around the slider. Most obvious is the border of the slideshow.

The slider below is a very beautiful image-based one. The border gives the appearance of a stack of images, and the slideshow uses great lighting transition effects that go nicely with the excellent photography. Notice how the border style goes nicely with the theme of the website as a whole, and the transitions also support that theme.


Showcase of Sliders

A very clean and simple slider, complemented by great illustrations.


A beautiful image carousel with nice slide effects, great borders and a convenient explanation feature.


Obox Design14
Simple and clean, this image slider gets the job done without any unnecessary features.


This website uses a few nice manual image sliders. This allows for the selection of videos and other objects to be more compact.


Josh Smith18
A very simple and minimalist image slider.


Benjamin David20
A nice slider gallery with a smooth vertical transition effect.


Design By Humans22
This website uses a very large slider to show featured products. The backdrop also changes along with the product, which is a very nice feature.


Lucas Hirata24
This very creative portfolio uses a sliding layout to fit a large amount of projects onto one page.


A standard image slider, with a number selection feature and text to accompany each item.


The Wojo Group28
A great slider layout that flows nicely with the thumbnail selector.


A good manual slideshow to showcase projects in the portfolio.


Another simple-featured slider with numbers to direct the user.


Rob Young34
This is a very creative and unique portfolio. When clicking on a project, the laptop slides back into view with the new project. This is a very smart way to showcase the work.


This website uses a simple manual slider with large buttons and smooth horizontal slide effects.


Each image in this slideshow displays for a set duration. A graphic is included in the corner to show the user when the image is about to change.


Global Oneness Project40
This home page uses a plain simple slider to show a list of featured videos.


A quick slider with convenient buttons and fade effects.


A fully styled and usable horizontal slider.


Scrap Blog46
An in-depth slideshow with a number of usable features and a Cooliris effect.


Deluge Studios48
Another website with grungy textures and fancy colors.


Daniel Stenberg50
This is an excellent portfolio that shows a horizontal sliding layout to navigate through the project modules.


Piotr Kulczycji52
A nice border and tilted display, along with great effects, make this slider worth a look.


World Concern54
This is a great Flash-based slider that features some really cool selection buttons.


The familiar Delicious home page slider is very simple but serves its purpose nicely.


This is a very well-thought-out image gallery with very smooth sliding and a clean layout.


Volkswagen UK60
This selection tool here is very usable because the user has the option of using either the buttons or the scroll bar.


Cream Scoop62
One more example of a simple image slider in a clean portfolio.


Cade Martin64
A very minimal image slideshow, with clean fonts and basic effects.


Barack Obama66
Obama’s website uses a Java-based slider with creative effects.


Thomas Prior68
Another portfolio with a slider to show featured projects. This slideshow has usable buttons and indicators to show where the user is in the slideshow.


Viktor Jarnheimer70
This is a very clever portfolio slider that uses an iMac to enclose the images, thus achieving a clean layout.


MVB Web Design72
A very simple slideshow on a simple website.


James Lai Creative74
A grungy slideshow with subtle but well-placed navigation buttons.


Trevor Saint76
This is a great website and includes a slideshow. The slider uses good vertical sliding effects.


Creative State78
This video slideshow looks nice and has usable buttons with preview hover effects.


Icon Designer80
A very large slider of featured projects with a nice layout.


Threadless Kids82
These two sliders change images when the user hovers over the button.


Phunk’n Creative84
A nice dark portfolio with a slideshow of featured products.


Related Articles

Pleaso also consider our previous articles:


↑ Back to topShare on Twitter

Matt Cronin is an avid graphic designer, web designer/developer, Cocoa programmer, photographer, digital artist, and the like. He also enjoys writing, and does quite a bit of writing for Smashing Magazine. He is currently working on a startup called VAEOU, which will have new services coming soon.

  1. 1

    I personally dislike the use of slideshows. They seem more like a leap back in usability than anything else as of now, and probably will in the future too given their set-up.

  2. 2
  3. 3

    Also see Glider which is useful for slideshows as well.

  4. 4

    This is an amazing post for any web developers out there.

  5. 5

    Great stuff, and some excellent examples. You make some very good points about the fact that everyone seems to understand how to use them, I think I’ll certainly hope to include them more in my work. Great post.

  6. 6

    n00b question, but how are most of these made? Flash?

    Also, @Quakeulf: if you need to show, say, a portfolio… how else would you propose doing it?


  7. 7

    Thank you for featuring the Obox Design site in this post. We actually made a tutorial on how to create that slider using CSS and jQuery.

    I am blown away that we are actually on Smashing Magazine :)

  8. 8

    Very useful writeup Matt, I like the article as i personally designed few of the slideshows modules for my clients. Thanks for your effort in putting all this together.

    DKumar M.

  9. 9

    Thanks for the very nice links. Slideshows are a good way for showing specific content like design portfolios etc. A good way to promote products or any kind of info.

  10. 10

    joyoge designers' bookmark

    March 9, 2009 10:44 am

    great post and beaituful web designs, thanks..

  11. 11

    Simon Harlinghausen

    March 9, 2009 10:51 am

    Fantastic article. Just what I needed for my own relaunch.
    It is everytime amazing how you hit the nail at his head.

    Beautiful designs and great inspiration. Stay tuned …

  12. 12

    Matt, great post.

    Could you amend the post (or post a comment) with the technology used in each of these slideshows?


  13. 13

    Thanks for including the great write up before presenting the showcase. Also bonus points for not having a number in the title. I like it!

  14. 14

    @Bob, @ed

    Sliders like this are generally made using Javascript techniques and there are many tutorials out there that can help you achieve a slideshow effect like these. Most of these are Java-based, but I think a few are Flash.

  15. 15

    I do like the use of slideshows if it is used right!
    It can be used very handy if you want to make one page website.

    Thnx for the post!

  16. 16

    It is called “miro”, not “micro”.

  17. 17

    Simple; carefully orchestrated thumbnails in a well-thought gallery presentation. Slideshows are for printed portfolios. Every gallery worth its salt has a simple “next/previous image” feature which eliminates any need for overly complex slideshow-solutions that might just end up being more choppy than smooth. What’s the big deal really, you’re just flipping from one picture to the other, there’s no need in making it part of the big waiting game for impatient people who just want to see content.

  18. 18

    I can understand the reasoning but I have to disagree with the first couple posters. I think that slideshows actually enhance usability by allowing the designer to use progressive disclosure to simplify the complexity of a content rich site. In our example (global oneness project) the goal was to always feature one new short film but still offer some of the latest short films “above the fold”. The cleanest way to accomplish this was with a simple / no frills javascript based carousel.

    Shawn Collins
    Visual Designer
    Global Oneness Project

  19. 19

    Quinn Ianniciello

    March 9, 2009 1:26 pm

    My university just updated their homepage at with a really nice application of a slideshow. Check it out and what do you think? It seems really fluid and it loads really fast… Thoughts?

  20. 20

    This is nice. The sliders are very good. It would have been cool if there were a couple of links to some nice sliders though.

  21. 21


    The typical gallery with little thumbnails are imho the worst thing ever invented…

    What is the point to have dozens of tiny worthless pictures, too small to see anything, clustering your design? You have to blind click on them anyway to get the content, so you may as well have the big pictures slide… ^__^

    Nice examples btw, thanks

  22. 22

    Nels Setterlund

    March 9, 2009 2:06 pm

    While sliders can be used in the above instances, aren’t they also used in tons of commerce sites to show off a large amount of content in a very limited space? Like Barnes and Noble, Borders, iTunes, Amie Street, etc. This effect completes the metaphor of looking through a vast catalog of things that are typically on shelves. Only instead of physically moving from shelf to shelf, the shelves themselves move.

    One complaint of mine though is hitting the end of a carousel. They should be endless, or so large you shouldn’t be able to hit the end. They seem to be to show off a vast amount of information while you are browsing, and hitting the end after only a few “Next” clicks, when I don’t find anything interesting, is a frustrating user experience.

  23. 23

    Personally, I hate slideshows, and as cool as the designs and effects are on many of these, they are still a pain.

  24. 24

    Sebastiaan de With

    March 9, 2009 5:26 pm

    Uh, guys, I think there’s been some sort of messup, because my website Icon Designer, is definitely not called K4 Laboratories.

  25. 25

    Been looking for a how-to on good slideshows for a week or so now. You guys just smashed me :)

  26. 26

    Very nice collection. Just what I was looking for.

    I’m wondering what people think is a better javascript library for slideshows: jQuery or Mootools? I am seeing Mootools has better and smooth transition effects. Any suggestions?

  27. 27
  28. 28

    Oh My GOD!
    Can you read minds or somehting?
    I just needed this for a website I’m making!!

    Thanks a lot guys!

  29. 29


    March 9, 2009 10:28 pm

    Great writeup – and one that I’ll be coming back to quite a bit in the future as I do a ton of slider designs for my own clients. As a side note, I find it awesome that the U.S. president’s website can be called out in such an esteemed list as this :)


  30. 30

    Ahem!! if slide shows were such a pain then they wouldnt be used so commonly…

    And they are nothing new… developers are using it since the longest time.. the only difference is the improvement in techs.. earlier it was mostly transitions in flash… now we have the same things possible with scripts… which are prefered if u look at it from developpers POV.

  31. 31

    Great list! Thanks a lot ;)

  32. 32

    Not so sure about your reference to Obox – for a feature on when and how to use them – I’d expect them to behave intuitively. When you get to the end, either left or right, you have no feed back as to this and you’re still left with a next and previous button with a hover state that does nothing.

  33. 33

    I think you have to think very carefully about the transition. I Have a slider on my website: and one of my primary goals were exactly, that the viewer should be able to browse through my showcases fast… Therefore the transition is also fast, and not very “wow-effected”.

    I think another think could be said about sliders. And that is, that it would be great, if you could youse the scroller on the mouse for further conveiniense, and usability…

    So use:
    and scroller

    - If you can figure it out how to make them…! ;)

  34. 34

    I’m not a fan of slideshows in web design, but I have to admit that, in some cases, they can be useful.

    I think there is a little typo in the first link of the “Showcase of Sliders” section of the article: it’s “miro” not “micro”.

  35. 35

    Nice selection Smashing Magazine. There are some pretty great ideas out there !

    And thanks a lot for talking about my portfolio website !

  36. 36

    Thanks Matt, t’hat’s an impressive list ! Unfortunately, I haven’t seen the one i’m using for photo or slideshows sharing : Joomeo ( ).

    I thought you could add it ;)

  37. 37

    Great collection, some really nice designs here. I’ll be using some of these later in the week for a few e-commerce shops I’ve got on…
    Although file size is often a problem with some of these slideshows, don’t suppose you have any tips on how to bring the sizes down?

  38. 38

    Great post!

  39. 39

    In my personal oppinion, the best way between Make it Auto and Manual is makin’ it slide on mouseOver… And YES – the posted designs are gorgeous – as usual =)

  40. 40

    This article really impressive

  41. 41

    Nice article.

  42. 42

    I hate slide shows flash tables xhtml flash php java Etc.

    I want a wagon and horses and a banner and a little orphan child to gather people as I sell me anti-web elixir.

    Come One Come All!!! Throw down your IE’s and euthanize your Fire Foxes I offer the art of of human to human interaction.

  43. 43


    Naive statements, as it seems you did not quite read my post. Who says thumbnails have to be small and a thumbnail gallery have to be cluttered? I prefer the option of choice when looking through things, not being forced to take things one picture at the time. I don’t want linearity in my surfing experience, for linearity you might as well watch a showreel instead.

  44. 44

    Can anyone offer a site where I can find a good tutorial on producing on of these?

  45. 45


    Check jquery plug-in wiki or who ever your perfer you can find plug-ins and more often then not how they did it or just look at the source code//////

  46. 46

    I use a slideshow to offer whats new at my company or going on… information, and SEO all without taking up so much real estate. My company We have events, concerts, sales, new models, ect going on all the time, it’s a great way to hi-light what’s new, and it’s not Flash :) All inline text for the search engines to gobble up.

  47. 47

    it very good. Thank you, smashingmagazine.

  48. 48

    check my new website, he have a lot of slider, particulary on the home page Meetday []

  49. 49

    Sebastián Veggiani

    March 12, 2009 4:01 am

    There is a mistake in the attribution of one of the slideshows in this article. It’s the one attributed to Dean Oakley wich, actually, it’s a banner designed & developed for our studio website.
    I’ve contacted you through the Contact Form yesterday but still haven’t received an answer.
    Could you check it please?
    Thank you very much.

  50. 50

    nice post, but would be better without “lazy loading” for images… or at least reserve the proper space so its content isn’t constantly moving around

    than you!

  51. 51

    Great article, though I’m surprised you didn’t present your examples in a slideshow or carousel. ;)

  52. 52

    can any body tell me any good slideshow for wp without flash and easy to install? besides nextgen.

  53. 53

    @MrJones – Just to let you know, we’ve since modified the slide show to hide the Next and Previous buttons when you reach either side, we’ve also created script which will return to the beginning when you reach the end as well, all depending on what other designers who are using our Scroller have asked us for.

  54. 54

    A great set of examples here, cleverly using mainly JS, Ajax, Jquery et al.

    We stuck with flash for ours so it could play video and images with a Vimeo inspired scrubber bar.

  55. 55

    Simon Dabkowski

    March 13, 2009 8:08 am

    Great list! Thank you.

  56. 56

    How can SEO and a search engine marketing campaign improve Leadsmarketer website ( position in the search engines? Our marketing and sales department invested a lot of resources in writing all the content for our web site but we just can’t seem to be ranking high enough in the engines, while our competition is on top. Do we have to re-write it all over again?

  57. 57

    I’ve used a combination of Horizontal image slider and Horizontal images scroller (iCarousel – MooTools) for my project (portofolio of oil paintings). Combining the components was somehow difficult, so feel free to make use of them.

    I’m very pleased with the result :)

  58. 58

    Great compilation, now if you can do one on the different scripts out there so that we can implement these ourselves. I haven’t seen a good resource on that, and I’ve had a lot of trouble finding one that can be easily customized to work the way I want it to.

  59. 59

    I need help with my slide show….
    There is a very large gap above the slideshow. I would like to get rid of that but I do not know how. If anyone could plz help me, then I would really appreciate it. Thx again, plz go to the following page to see what I am talking about. Thx

  60. 60


    August 4, 2009 6:52 am

    Thanks for featuring my site:

    However I have since updated my design and no longer use the slideshow.

    I have archived my old design here though if you’d like to update the link.


  61. 61

    I love the content slider.
    Can someone point me in the direction to where I can find out how to do that?


  62. 62

    Look at this simple and customizable Jquery slideshow example with html teaser, autoslide and ajax support:

  63. 63

    Really cool list!

  64. 64

    Daniel Mulvihill

    August 3, 2010 10:17 am

    Matt, thanks for compiling all these examples and for your analysis and research.

  65. 65

    It’s very nice for inspiration. Thank U very much

  66. 66 has a nice one. It infinitely slides and has a paged navigation. It was built with flash, but I’ve re-built it as a standalone slider using jQuery/JavaScript if anyone is interested.

    As always, thanks for the amazing content Smashing!

  67. 67

    really nice, thanks.

  68. 68

    I personally love slide shows. My website,, utilizes a slide show to offer Fredericksburg real estate listings. IDX Broker offers these tools for Realtors. I keep the framework small. I use slide shows for different categories of real estate. Keeping the slideshow above the fold captures many leads. You have some of the finest examples I’ve ever seen described in your blog. Thanks for the useful information.

    Tom Smith
    Century 21 Adventure Redwood

  69. 69

    Our new and improved website takes sliders to a new level. We use a WordPress plugin to create sliders inside responsive frames. This inturn has improved our page conversion rates as it keeps the visitor on a page where they can then view a range of sliders without leaving the page. Take a look

    Anybody else using responsive sliders? It’s improved our mobile and tablet retention rate no end.

  70. 70

    I hate slideshow abuse!

    July 2, 2013 8:10 am

    I notice that almost all the cheerleading comments about slide shows come from web designers. Please realize that many of us in the general public absolutely loathe them. If you insist in using them, PLEASE have the courtesy to offer your reader, where feasible, the option to view the information on a single page instead.

  71. 71

    I think the problem is not slideshows in itself but how they are applied and under what circumstances. To just slap a big visual slideshow on every site no matter if its suitable or not, is not a good strategy.


↑ Back to top