This dark and dramatic slider design uses black and white to striking effect.
The main slider does not have a border or frame of any kind. The slider does have a slight shadow, which helps lift it up from the website background. Because there is no border, the image takes up the maximum amount of space available to it. This is particularly effective when used as a ‘full-screen’ slider, where the images can use every pixel of screen space available and display a fantastic panoramic view.
Hovering over the slider brings up two navigational arrows, one at either side of the slider. The arrow is a thin white arrow head on a black circle with a transparent border and then a black border (creating a double circle effect). The whole thing is semi-transparent, allowing the colors of the image to show through and making it quite discreet. Hovering over the arrow turns it completely opaque, and let’s the user know they can interact with it. Clicking on the arrow cycles the user through the slideshow images.
There is a caption in the bottom left corner of the slider. It has large white text on a black rectangle with rounded corners. The caption is semi-transparent, which allows the colors of the image behind to show through. The font used is Didact Gothic, a sans-serif font that is clear and simple to read. This font has been designed to use the form of letters most often taught to elementary school children, meaning this slider would be a good choice for schools and educational websites.
At the bottom center of the slider are a series of semi-transparent black circles. Each of these circles represents an image in the slideshow. The circle that is linked to the current image on display gains a transparent border and then a thin black border, which creates a double circle effect that is the same as that seen on the navigational arrows.
Hovering over a circle creates the same double circle effect, and also brings up a preview image. Each preview image has a shadow to help lift it from the background, and a small black arrow pointing to the circle that represents it. Clicking on a circle loads the relevant image into the slider, and allows the user to navigate to the image they are most interested in.
The default change effect is ‘domino’. This effect breaks the image into a series of squares, each one of which ‘slides’ the replacement image into place. The overall effect is attractive, with lots of movement to catch the eye. Other change effects that also have lots of movement are ‘collage’ and ‘seven’.
This slider would work well on a website with a darker color scheme, or on a site that uses black and white to create a striking look. The use of transparency and shadows keeps it from feeling too stark and minimalist.