Fade Effect & Demure Skin Html Slider

This slider has a simple but unique design. It is a CSS-only slider design, which makes it fast to load. It is also completely responsive and can be used on any platform, even ones without javascript.

It uses white, blue, and black to great effect and the use of semi-transparency gives the design a sophisticated edge.

This slideshow is not as panoramic as many slider designs, which means it works well with more square shaped images. This is quite unique, and makes it a more flexible design.

There is no border or frame. This allows the images to really draw the eye. Hovering mouse over the image shows navigational arrows. There are two white arrow heads, each displayed on a semi-transparent black rectangle with rounded corners. The rectangle is orientated on the vertical. The arrow is hinged on one side, opening like a door. There is a little bounce when it finishes 'opening', which makes it feel organic.

Hovering over the arrow causes the vertical rectangle to stretch into a square, that emerges directly from the edge. The square turns blue, the arrow stays white but moves outwards slightly, to be at the center of the square. The whole thing is stylish and unique.

If the user clicks on the arrow, they can cycle through the images.

The user sees a caption in the slider bottom-left corner. The caption is white text on a black rectangle (also semi-transparent) with slightly rounded corners. The caption flips into place, in the same fashion as the navigation arrow. It is hinged along the top axis. The text then slides in from the left side. The effect is sophisticated and eye-catching.

The captions use Roboto, a stylish geometric sans-serif font that still feels natural.

At the slideshow center bottom are a number of semi-transparent black circles. Each one represents one slide. One circle, that is linked to the image currently on screen, turns blue and turns opaque.

If the user hovers over a circle it brings up a small preview image in a blue frame, and with a small blue arrow at the bottom pointing to the right circle. This preview image flips into place as though hinged from the bottom, which replicates the feel of the navigation arrows and caption.

Clicking on a circle loads the linked image, and gives the user the ability to navigate to the image they are most interested in.

The change effect on this demo is 'fade', which fades each new image in over the previous one. It somehow manages to channel the feel of old polaroids, which works well with the more square shape.

This design is stylish, yet manages to retain an old-fashioned sophistication. The square main slider makes it incredibly flexible, and could be used by companies that don't have access to stunning panoramas. In particular it would be great for showcasing design details on artwork or hand-made products.