From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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!
nishhhhhhhhhh
Nice article. Thanks for sharing!
Like This ^_^
some of these were very cool, too much innovation… thank you
nice
Nice..Thanks
I would like really love a jquery tutorial that produces the same slideshow as stella mccartney’s
Thanks for the Stegner+Sease mention!
NIce sliders at all….
Nice … Thanks
Some great use of sliders!
Thanks for the links.
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
These sliders are really awesome..thanks for sharing