This slider has a unique, three-dimensional design.
The main slide has a grey border with a thin highlight, thin shadow and softer drop shadow. The result is that it looks like a three-dimensional frame. The use of grey keeps it modern and clean.
Below the main slide is a large gradient drop shadow, which is a very modern and clean way of raising the slider away from the main website and making it stand out. This drop shadow would work best on a website that has a lighter background.
Down the left-hand side of the main slide is a set of preview slides, stacked vertically. Each one has a similar grey frame. The preview image that is linked to the current main slide is highlighted by the frame turning white instead of grey.
Hovering over the preview slides makes them scroll up and down, so you can see all the relevant slides. This makes it extremely easy and obvious how to navigate through the slides, making this slider perfect for websites aimed at less tech-savvy users.
There is a subtle hover effect as you mouse-over each preview image, where the colors are slightly darker and richer. This reinforces the fact that these preview images are clickable.
Hovering over the main slide brings up the navigation arrows, one on each side. These arrows are dark grey, and have an embossed look. They have a lighter grey circle background, with a series of semi-transparent borders in dark and light grey. Again, the effect is three-dimensional, and very inviting to click on.
Hovering over the navigation button makes the arrow turn darker, and reinforces the fact you can interact with this element. Clicking on it takes you to the next or previous slide.
There is a caption in the bottom-left corner of the slider. The caption has a semi-transparent grey background and uses a dark grey font. The font used is Marmelad, a rounded san-serif font that is well-balanced with regular proportions. It feels modern, but the rounded lettering keeps it friendly and warm.
The default change effect is called ‘squares’, where the image is gradually replaced by the next one, square by square. It is a simple but elegant effect, which works well with the modern design of the slider. Other change effects that would work well with this design are ‘glass parallax’ and ‘seven’, both of which are modern and smooth.
This slider would work well for modern, professional websites that want to show they are trustworthy. The use of a monochromatic color scheme makes it serious and professional. Sites about finance, small business owners and professional freelancers would all benefit from this slider design.