This dark and dramatic slider design uses black and white to striking effect.
The slider does not have a frame of any kind. It does have a slight shadow, helping lift it up from the 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 images shows two arrows, one at either side of the slider. The arrow is a thin white 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.
The caption is in the bottom left corner. 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.
The animation 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 image carousel would work nice 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.