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 […]
From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
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.
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.
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.
This is more of a text slider with a very nice dot navigation at the top.
The nice part of this slider is the title that appears at the right side, reordering the letters in an interesting and dynamic way.
This amazing portfolio item presenter slides out three project screenshots from the bottom and will move the hovered screenshot in front.
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.
At ockert-partner.com the user can navigate through a thumbnail slider with the keys and hit enter to view the full image.
This slideshow has a nice delay on the description item of the image when it slides in.
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.
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.
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.
This is another nice example of a full screen presenter with a beautiful navigation.
And another full page slider with a very unique placement of the navigation arrows.
Here is a rare example of a circular image slider, very interesting.
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.
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.
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.
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.
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.
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!