Kenburns Transition & Dodgy Style Image Slider Jquery

If you want a quirky, fun but modern slideshow template for your website, then this particular template from cssSlider could well be the one you are looking for.

Using modern, clean lines and cutting edge web technology to create a fast, responsive slideshow, the design nonetheless keeps a friendly and quirky touch through the use of an attractive green-blue color scheme and a handwritten font.

The slideshow itself has relatively small images, so that the slider doesn’t dominate the website. It’s ideal to showcase particular articles on a blog, or to show off products on an e-commerce website.

When you first look at the slider, you notice that the images are in constant, gentle motion. They transition by fading and moving slowly across the slider. It’s attractive, and the constant motion is eye-catching.

In the bottom left corner is a caption. This is a green-blue rectangle that slides in from the left of the slider. This rectangle is flush to the left and bottom of the slider, which is unusual and gives the design a modern, slightly quirky feel. The font used is a cursive one called ‘Indie Flower’ — it’s carefree and open, with rounded edges. It is a great counterpoint to the otherwise square lines of the design.

On the opposite, bottom right corner is a long green-blue rectangle with a pause symbol directly next to the corner. One ‘square’ of this rectangle is a slightly darker shade of green. This square moves along the length of the rectangle, and is the only sign that this area of the slider can be used to jump between slides. It’s a nicely discreet piece of functionality.

Hovering over the ‘parts’ of the rectangle brings up preview images, in a square shape. Clicking these parts of the rectangle loads the image into the slider. It also automatically pauses the slider.

When paused, the icon in the bottom right corner turns into a ‘play’ button. Clicking this button will restart the slideshow.

Finally, hovering over the slideshow will bring up two squares, one on the left and one on the right. These squares are flush to the edge of the slider, and contain double-arrowheads. These function as next and previous navigation arrows. Hovering over one of the square brings up a preview of the next/previous image. The image flips up, like a cube opening.

As you would expect, clicking these arrows loads the relevant image into the slideshow.

Overall, this attractive template would work well for many blogs, or small ‘indie’ e-commerce sites as it has a slightly handmade but modern feel.

As with all cssSlider designs, the slider is fast to load, responsive and works across all modern platforms.