This slider has a bold, fun design. It uses a range of grey and makes clever use of transparency.
The main image has a grey border, which is quite subtle but still helps the images stand out from the website background.
Hovering over the slider brings up two navigational arrows, on on each side. These arrows are thin black arrowheads on a light grey circle. The navigational arrows are semi-transparent, allowing the colors of the image below to show through. Hovering over an arrow inverts the colors, so that the arrowhead turns white and the circle turns dark-grey. This is a nice, clean and modern looking rollover effect that lets the user know they can interact with the arrow.
Clicking on the arrow cycles you through the images.
There is a caption in the lower left corner. The caption has dark grey text with an embossed effect against a light grey rectangle with rounded corners. The rectangle emerges directly from the edge of the frame. The caption slides in from the left, which is a nice detail that adds movement and interest to the slider.
In the centre of the slider is a play/pause button. This has a dark-grey button inside a light grey circle. Hovering over the button inverts the colors in the same fashion as the navigational arrows. Clicking on the button changes it to the opposite button — so if you pause it, the icon changes to play, and if you play the slideshow the icon changes to pause.
At the bottom center of the slideshow are a series of light grey circles with dark grey borders. These circles are semi-transparent so the background colors show through. Each circle represents on of the images in the slideshow, and when highlighted the colors become less transparent (the center circle becomes completely opaque).
Hovering over a circle brings up a preview image of the slide linked to the circle. Each preview image has a semi-transparent grey border and a small arrow pointing to the relevant circle. The whole system is very user friendly, with lots of cues to let the user understand what is happening.
Clicking on a circle loads the relevant image into the main slider and allows the user to navigate directly to the image they are interested in.
The default change effect is called ‘page’. This is a unique transition effect where the image drops away in a semi-circle to the left and then falls away completely. It’s bold and different, and part of what makes this slider design so special.
This slider would work well on technology websites and software companies that build fun apps or programs. It would also work well on fashion websites, due to the stylish design. However, the slider as a whole is flexible enough to be used on any website.