Zoom Transition & Demure Skin Non Jquery Slideshow
This carousel has a modern, stylish design. It uses white, orange, and black to great effect and by using semi-transparency the designer gives the slider a modern edge. Because the design is stylish and eye-catching, it would be great for fashion designers or journalists, or fashion bloggers. It would also work for a stylish and elegant restaurant. Indeed, any company that wants to create a sophisticated brand could use this slider design.
There is no frame or border around the slides, which allows the images to have maximum impact. Hovering the slide brings up two arrows, each allowing the user to navigate through the slides. The arrows are white arrow heads on a black semi-transparent rectangle with rounded corners. This rectangle is vertically orientated. The arrow flips in like it hinged on one side and then opens like a small door. There is a subtle bounce when it finishes 'opening', which helps it feel almost tangible.
Hovering over the arrow stretches the vertical rectangle into a square, that directly touches the edge. The square turns orange, the arrow moves outwards slightly in order to remain at the center of the square. The whole effect is stylish and unique.
Cycle through the images by clicking on the arrows.
The slider has a caption in the bottom left corner, comprised of a main title and a smaller ubtitle. The main title uses white text on a black rectangle with slightly rounded corners. The rectangle is semi-transparent. The sub-title is white text on an orange rectangle with slightly rounded corners. They both flip into place, in a similar fashion to the navigation arrow. They are both hinged along the top axis, but both appear at slightly different times, creating a 'cascade' effect.
The text then slides in from the side - the left on the main title and the right on the sub-title. Again, the whole thing is eye-catching.
The font used is Roboto, a stylish sans-serif font with geometric forms that retains a natural feel.
There are a series of black semi-transparent circles at the center bottom of the slideshow. Each one represents one of the images. The circle that is linked to the image on display turns orange and becomes opaque.
Hovering over a circle brings up a small preview image in an orange frame, and with a small orange arrow at the bottom pointing to the circle. This preview image is hinged from the bottom and flips into place. This effect replicates the look-n-feel of the nav arrows and captions.
The user can go directly to the image they really want to see by clicking on the appropriate circle.
The change effect on this demo is 'zoom', which zooms and fades out the current image and zooms and fades in the next image. It works well with the stylish look, and replicates the use of semi-transparency which helps give the modern design a lot of depth and sophistication.
The design only uses CSS, which means it can be used on platforms with javascript disabled, mobile website builder, and also makes it quick to load and responsive.