20 Unique and Creative Image Sliders

Image sliders and sideshows have become an essential element in web design. They are a great way to display information and visual content in an interesting way. From the classical […]

Image sliders and sideshows have become an essential element in web design. They are a great way to display information and visual content in an interesting way. From the classical slide-to-the-side method to modern full page sliders – today we want to show you some unique and creative versions of the classical image slider.

IWC Schaffhausen


This first example shows a tiny progress bar that will indicate how much is left to show the next slide or image. This comes very suitable in the context of watches.

Lorem Ipsum


This full page image slider is composed of three huge images that slide in automatically or when you choose one of the big letter words at the top. When clicking on one of the categories and an item, you can see another interesting full page slideshow.

Crows Nest


This is more of a text slider with a very nice dot navigation at the top.

Escape Module Studio


The nice part of this slider is the title that appears at the right side, reordering the letters in an interesting and dynamic way.

Factoria


This amazing portfolio item presenter slides out three project screenshots from the bottom and will move the hovered screenshot in front.

Allan Yu


allanyu.net has an incredible web page layout and two interesting slider elements: one is vertical which slides the project into the viewport and the other is the image slider for the single items.

Ockert und Partner


At ockert-partner.com the user can navigate through a thumbnail slider with the keys and hit enter to view the full image.

FillStudio


This slideshow has a nice delay on the description item of the image when it slides in.

digital-telepathy


This might seem like a normal content/image slider but I really liked the way the image slides and fades out at the same time, making a new description appear at the right.

Stella McCartney


Now this is a unique image slider with a beautiful effect when choosing a look/product: the current model seems to separate from the background zoom in.

Built By The Factory


A fading image slideshow with a twist: some parts of the images seem to come out of the frame. This little detail is also used by the slideshows on apple.com.

Marco Rotoli


This is another nice example of a full screen presenter with a beautiful navigation.

Mens World


And another full page slider with a very unique placement of the navigation arrows.

Stegner + Sease


Here is a rare example of a circular image slider, very interesting.

Mark Sousa


While this is a normal image slider, its images are done in a nice way. It gives the whole thing perspective and makes it look very interesting.

Ptarmak


Now this is a real “slider” with a custom scroll navigation at the bottom that will move the images horizontally. You can also drag the elements to navigate through them. When you choose one of the subitems on the left, the whole thing will slide vertically to the respective part.

Jay Hollywood


This slideshow is really cool because you can see part of the previous and next items. When they slide, they pass by the beautiful mask element with a shadow.

dibusoft mmdv


The nice thing about this image/content slider is the movement of the elements to the top and to the side when clicking on the navigation arrows.

Try Soda


I like this slideshow because it is two sliders in one: the image and the description both slide in from the side and this creates a neat effect.

WPBundle


In this last example, the full width of the window is used. The interesting detail about this image slider is the description and the arrows that stay in the same place and fit into the beginning and end of the previous/next images which can be seen partly.

And that’s all! I hope you liked this little collection and find it inspiring!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 13

Comments are closed.
  1. I would like really love a jquery tutorial that produces the same slideshow as stella mccartney’s

  2. I myself created a very minimalistic image slider a while back and released it for free to the community. It too uses 3D to transition between images. All settings are tweakable via XML and since it’s built on Papervision and not the native 3D engine in Flash it even has Flash Player 9 support, just like CUB3R!

    Anyway, here’s my free image slider