This slider has a very clean and simple design, that is flexible enough to work with almost any sort of website. It uses white and dark grey.
The slider can be both ‘boxed’ which makes it conform to the main part of your website, or ‘full width’ which allows it to fill the whole of the users screen horizontally.
The main image has a very thin white border, that is just enough to help the images stand out from colored or dark backgrounds.
Hovering over the slider brings two navigational arrows into view, one one each side of the slider. These are two semi-transparent dark grey circles with a thin white border containing a bold white arrow. Hovering over the arrows makes the border less transparent and thus brighter. It is a subtle roll-over effect that still lets the user know they can interact with the arrows. Clicking on the arrows allows you to navigate through the slides.
There is a caption in the bottom left corner. It has white text on a dark grey rectangular background. The rectangle has rounded corners and a thin white border. The caption is semi-transparent, which allows the background image to show through.
The font is Open Sans Condensed, a humanist sans-serif font that is fairly neutral, but still friendly. It is a font designed for screen, so is extremely legible.
At the bottom of the slider are a series of circles. Each circle is white, with a dark grey border and then a white border. The double border is an attractive and stylish design choice. Each circle is linked to a slide in the slideshow. They are semi-transparent, except for the circle linked to the current slide on display. These are still slightly transparent, but less so that the other circles. This helps let the user understand how the circles work and what they represent.
Hovering over a circle inverts the colors, so it becomes a dark grey circle with a white border. It also brings up a preview image of the slide. Each preview image has a white semi-transparent border. Clicking on a circle takes you to the relevant image, and allows users to navigate directly to the image they are interested in.
The default change effect is ‘blur’, which blurs the previous image out and the new image in. It’s a simple transition, which would work with any kind of image. Almost all of the transition choices would work with this slider, but another nice and fairly neutral one is collage.
The design of this slider is very flexible, and would work with any kind of website from blogs to e-commerce stores to portfolios. It is completely responsive, so looks equally good on tablets and smart phones as on desktop computers and laptops.