This slider has a clean and simple layout that uses blue and white.
The slider is completely responsive, and it can be both full-width or boxed so fits a wide variety of website layouts.
The main slider has a thin blue border, which helps separate the images from the background of the website. The slider would work on websites with both a light and dark background.
Hovering over the slider brings up the navigational arrows. These are two small, solid white arrow heads inside a transparent circle with a thin white border. The arrows are clean and simple, and do not detract from the main image. Hovering over an arrow turns both the arrowhead and border blue instead of white. Clicking on the arrow navigates you through the images in the slider.
There is a caption in the bottom left corner. There is a main title, which is white text on a blue rectangular background. This rectangle extends directly from the edge of the slider, and is semi-transparent. The main title slides into place from any direction. There is a little ‘bounce’ at the end of the slide, which makes the movement feel very organic and natural.
The sub-title is blue text on a white rectangular background. This rectangle is also semi-transparent, and also slides into place with a little bounce. It’s all got a nice feel to it, and shows the designer has paid attention to small details.
The font used is Source Sans pro. This is a sans-serif font that is clean and simple, and very legible.
Below the slider are four preview images, each one with a white border. Hovering over the preview images scrolls through all the images in the slider, and allows the user to click on whichever image they want to look at. This allows the user to navigate directly to the image they are most interested in.
The preview image that is linked to the current main image has a blue border instead of a white border. This makes it stand out.
In addition, there is a subtle roll-over effect when you hover over one of the preview images. The preview image turns slightly darker.
The default change effect is ‘basic linear’. This is a simple transition where each image slides into place from the left (or right, if you are cycling through the previous images). It is clean and matches the movement of the captions well, so is ideal for this slider design.
This slider is clean and simple, so would work well for a wide range of websites. The blue and white gives the slider a slightly nautical feel, so it would be a great choice for travel companies, cruise-liners, hotels or bed-and-breakfast’s near the coast and so on. It would also be nice for e-commerce sites that sell ocean and holiday related products.