Slide Transition & Blast Template Image Slider

This slider is a full-width, CSS-only slider that is dramatic and beautiful. It has touch-swipe enabled, which makes it ideal for tablets and smart phones, and it is also very fast to load.

Because the slider is full-width, the images have maximum impact, making this slider a great choice for photographers and other people who want the focus of their site to be on images.

There are two navigational arrows and a pause/play button that appear when the user interacts with or hovers over the slides. These use bold white icons against a deep blue circular background. They seem to 'drop' into position, fading in and shrinking down. It's a dramatic and attractive effect, that works just as well in reverse, when the icons seem to 'rise' off the slider. The whole thing gives the design a 3-dimensional feel.

Hovering over the icons creates a blue border that seems to radiate out from the central circle and then fade away. Again, it's a stylish and dramatic effect that really makes this slider design stand out.

The icons do exactly what you would expect: clicking on next/previous arrows take you to the relevant slides, and clicking on the play/pause button will either stop the slideshow or start it going.

The user can also navigate between slides by using the circles at the bottom center of the screen. These circles are deep blue, and each one represents an image in the slideshow. When a new image moves into the viewport, the relevant circle gains a semi-transparent bold white border that draws the eye and helps the user understand how the circles work.

Interacting with the circles displays a preview image in a blue frame. This preview image drops in and flies out in the same way that the other icons do. Clicking on a circle then loads that image into the slideshow.

Each image in the slidehow 'slides' to the next one, either to the left or right depending on if it is the next slide or a previous one. When using the circles to navigate to an image two or three slides away, or when the slideshow reaches the 'end' of the images and goes back to the beginning it runs quickly through all the slides. This gives it a natural, 'realistic' feel that is quite subtle but makes the slider feel friendly and organic.

A caption sits in the left bottom corner. There is a title and a subtitle, both white text on a semi-transparent blue rectangle. The captions 'drop' and 'rise' in and out of place in the same way as the other icons and the preview images. The semi-transparent blue background allows the colors of the photo below to show through, and gives the caption a slightly softer feel.

The captions use Duru Sans, a sans-serif font that mixes humanist and modernist design. The result is very elegant, and gives the design a sophisticated feel.

Because there's no JQuery, no javascript and no images, this slider is fast and works on any platform. It will be perfect for mobile-first designers.