Rotate Effect & Agile Theme Image Gallery

This CSS-only slider loads quickly and is completely responsive. It allows the user to make touch-and-swipe gestures to navigate through the slide, making it ideal for mobile-first designers. The overall look is clean and fresh, but with a few interesting quirks. The slider uses a white and orange color scheme.

The demonstration does not have a border, and is quite square in shape. The square shape means the image gallery is very flexible, and can be used with a wide range of photographs.

Hovering over the slide image displays two navigational arrows on either side, and a pause/play icon in the center. The navigation arrows are white arrow-heads on an orange circle, and the play/pause icon is also white on an orange circle. These icons 'spin' into position, and if you stop hovering over the slider they spin and fade away.

If the user hovers over the icons, they gain a second orange border around the orange circle, creating a 'double-circle' effect. The navigational arrows shift backwards and forwards, encouraging the user to click on them. Clicking on either arrow allows you to go backwards and forwards through the images.

Clicking on the 'pause' button will stop the slider from displaying the next image and changes the icon to a 'play' symbol. Clicking on the play symbol starts the show again.

The caption sits in the bottom left corner and uses a sans-serif font called 'Lato'. The text is white, and it sits on an orange background. There is both a title and a subtitle, and both have separate, rectangle backgrounds with rounded corners that combine to create a new shape. These captions zoom slowly into view, one after the other, which gives them quite an organic feel.

At the bottom of the slide are a set of orange circles, which represent slideshow images. The circle that represents the current image gains an orange border that creates a 'double circle' effect. A nice touch is that the second circle is slightly askew. It's a subtle design feature, but it helps the design feel quite organic.

When the user hovers over a circle a preview image in an orange frame zooms slowly into view. These preview images allow the user to see the other slides that are coming up, and select one to load.

The default transition effect is 'rotate', which spins in a new image and spins out an old image. It's clean and modern in feel, but with lots of movement.

The design is modern and fun, and would work well for a wide range of websites. The responsive, CSS-only design makes it perfect for sites optimized for mobiles, so is great for companies that need to give information and sell their services to people on the go - such as public transport websites, 'last minute' shopping sites and tourism websites.