EnglishWOWSlider  DeutschBildergalerie Diashow  EspañolGaleria de Imagenes, Slide Imagenes Gratis  FrançaisDiaporama Galerie D'Image  ItalianoImmagini Galleria  汉语网络幻灯片: 效果的幻灯片  Português brasileiroGaleria De Imagens  Русскийслайдер изображений, слайдшоу, CSS3 слайдер  SvenskaBild Galleri  日本語画像のスライダー&ギャラリー  NederlandsAfbeeldingen Caroussel 

More Demos

  How to create a photo slideshow!

You can create photo slideshows in a few clicks! Just watch this video here!

  Photo slideshow on the page!

That's what you get after working with WOW Slider app!

  Photo slideshow HTML Code

Code to paste between the tags <head></head>:

<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->

HTML code to paste between the tags <body></body> in the place that you want the photo slideshow to appear:


<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="images/demo/metro-rotate/data1/images/boats.jpg" alt="Boats in Portugal" title="Boats in Portugal" id="wows1_0"/></li>
<li><img src="images/demo/metro-rotate/data1/images/coast.jpg" alt="Coast" title="Coast" id="wows1_1"/></li>
<li><img src="images/demo/metro-rotate/data1/images/landscape.jpg" alt="Beautiful landscape" title="Beautiful landscape" id="wows1_2"/></li>
<li><img src="images/demo/metro-rotate/data1/images/lighthouse.jpg" alt="Lighthouse" title="Lighthouse" id="wows1_3"/></li>
<li><img src="images/demo/metro-rotate/data1/images/panorama.jpg" alt="Panorama" title="Panorama" id="wows1_4"/></li>
<li><img src="images/demo/metro-rotate/data1/images/seascape.jpg" alt="Sea-scape" title="Sea-scape" id="wows1_5"/></li>
<div class="ws_bullets"><div>
<a href="#" title="Boats in Portugal"><img src="images/demo/metro-rotate/data1/tooltips/boats.jpg" alt="Boats in Portugal"/>1</a>
<a href="#" title="Coast"><img src="images/demo/metro-rotate/data1/tooltips/coast.jpg" alt="Coast"/>2</a>
<a href="#" title="Beautiful landscape"><img src="images/demo/metro-rotate/data1/tooltips/landscape.jpg" alt="Beautiful landscape"/>3</a>
<a href="#" title="Lighthouse"><img src="images/demo/metro-rotate/data1/tooltips/lighthouse.jpg" alt="Lighthouse"/>4</a>
<a href="#" title="Panorama"><img src="images/demo/metro-rotate/data1/tooltips/panorama.jpg" alt="Panorama"/>5</a>
<a href="#" title="Sea-scape"><img src="images/demo/metro-rotate/data1/tooltips/seascape.jpg" alt="Sea-scape"/>6</a>
<div class="ws_shadow"></div>
<script type="text/javascript" src="images/demo/wowslider.js"></script>
<script type="text/javascript" src="images/demo/metro-rotate/engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->


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.

Photo slideshow builder

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.

photo slideshow maker

© 2016 WOWSlider.com - All Rights Reserved. Terms Privacy