This slider has a clean and inviting design. It uses black, white and grey.
The main image has a white frame around it. The frame has a faint drop-shadow that gives it a slightly three-dimensional effect.
Hovering over the slider brings up two navigational arrows, one on each side. These arrows are bold semi-transparent white arrow-heads, again with a faint drop-shadow that gives them a three-dimensional effect. Hovering over an arrow turns it from semi-transparent to opaque, and let’s the user know they can interact with it. Clicking on an arrow takes you to the next or previous image in the slideshow.
At the bottom of the image is a semi-transparent black bar that extends the full-width of the image. This is where the caption is displayed. The caption is in white and uses the font ‘Simonetta’. This font is based on italian Humanistic typefaces, but with a contemporary twist. It’s elegant but also friendly, and adds a dash of flair to the otherwise minimalist and clean slider design.
Below the main image is a set of preview images. These are almost identical to the main image, except smaller. They have the same white frame and drop-shadow effect, however they are semi-transparent so that they fade into the background of your website.
The exception is the preview image linked to the main image currently displayed. This is not semi-transparent, so that it stands out in the series of preview images.
By hovering your mouse over the top or bottom preview image, you can scroll through all of the preview images and select the one you want to look at. In addition, the preview image you are hovering over decreases it’s transparency but not completely. This differentiates it both from the preview images the user is not interacting with, and the current highlighted preview image.
Clicking on a preview image displays it in the main slider, allowing users to skip to the slide they are most interested in.
The default change effect is ‘fade’, where one image fades gently into the next. This is a gentle and minimalist transition that works well with the clean and simple design of the slider. Another transition effects that could work well with this design are ‘kenburns’, which is very similar to ‘fade’ but adds a sense of movement that is pleasing and eye-catching.
Because of this sliders clean but friendly design it would work well for travel websites, photographers, hotel chains and e-commerce websites. The simple slider design allows the images to take center-stage, so is great for any website that has stunning images to display.