You can create photo slideshows in a few clicks! Just watch this video here!
That's what you get after working with WOW Slider app!
Code to paste between the tags <head></head>:
HTML code to paste between the tags <body></body> in the place that you want the photo slideshow to appear:
This slider has a bold but simple design that is very striking. It uses the color white to great effect.
The main image has a white border with a faint grey line and drop-shadow. The overall effect creates a three-dimensional picture frame look, that is attractive without being overwhelming.
Hovering over the slider brings up two navigational arrows, one on each side. The arrow is quite bold, and white. It is contained within a transparent circle with a white border. The whole thing is semi-transparent, which allows the colors of the photo below to show through. Rolling over the navigational arrow turns it opaque white, and signals to the user that they can interact with it. Clicking on the arrow cycles you through the images.
There is a caption in the bottom left of the slider. It has large white text in a transparent rectangle with a white border. Because the rectangle is completely transparent, the images in the slider must have dark or colored backgrounds as the text would not show up against a white or light image.
The font used is Open Sans Condensed, a humanist sans-serif font with a neutral but friendly appearance. It is a font optimized for the screen, and as such is very legible.
At the bottom-center of the slider are a series of transparent circles with semi-transparent white borders. Each circle represents an image in the slideshow. The circle linked to the current image in the main slider turns a less-transparent white, highlighting it. Hovering over a circle does the same thing, turning it less transparent. It also brings up a preview image in a white frame with a small white arrow pointing to the circle.
Clicking on a circle will load the relevant image into the slider. This allows the user to navigate directly to the image they are most interested in, without having to wait for all the images to cycle through the slideshow.
The default change effect is ‘rotate’. The image transitions to the next by rotating away, whilst the next image rotates in. It’s a simple but effect transition, with lots of movement that attracts the eye. Most of the available change effects would work with this slider, because of it’s simple and flexible design. ‘Book’, ‘Kenburns’ and ‘glass parallax’ would all work well as they are simple and clean transitions.
The simple design of the slider makes it flexible enough to use on a range of websites. Because it only uses the color white, it would look particularly dramatic against dark or colored website backgrounds. However, the use of the drop-shadow and 3-D look to the white frame means it would also stand out on a white or pale website background.