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

  Video Tutorial: HTML5 Gallery!

Make Mobile HTML5 Gallery with easy-to-use WOW Slider application!

  HTML5 Gallery - Cool Transitions!

Find more interesing transition effects you can use for your website gallery!

  HTML5 Gallery HTML Code

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

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

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


<!-- Start WOW Slider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="images/demo/puzzle-collage/data1/images/cascade.jpg" alt="Cascade in the jungle" title="Cascade in the jungle" id="wows1_0"/></li>
<li><img src="images/demo/puzzle-collage/data1/images/cityscape.jpg" alt="Cityscape, Thailand" title="Cityscape, Thailand" id="wows1_1"/></li>
<li><img src="images/demo/puzzle-collage/data1/images/hermitcrab.jpg" alt="Hermit crab" title="Hermit crab" id="wows1_2"/></li>
<li><img src="images/demo/puzzle-collage/data1/images/islands.jpg" alt="Islands" title="Islands" id="wows1_3"/></li>
<li><img src="images/demo/puzzle-collage/data1/images/lizard.jpg" alt="Hidden lizard" title="Hidden lizard" id="wows1_4"/></li>
<li><img src="images/demo/puzzle-collage/data1/images/nature.jpg" alt="Amazing nature" title="Amazing nature" id="wows1_5"/></li>
<li><img src="images/demo/puzzle-collage/data1/images/stream.jpg" alt="Stream" title="Stream" id="wows1_6"/></li>
<li><img src="images/demo/puzzle-collage/data1/images/view.jpg" alt="Fantastic view" title="Fantastic view" id="wows1_7"/></li>
<div class="ws_thumbs">
<a href="#" title="Cascade in the jungle"><img src="images/demo/puzzle-collage/data1/tooltips/cascade.jpg" alt="Cascade in the jungle" /> </a>
<a href="#" title="Cityscape, Thailand"><img src="images/demo/puzzle-collage/data1/tooltips/cityscape.jpg" alt="Cityscape, Thailand" /> </a>
<a href="#" title="Hermit crab"><img src="images/demo/puzzle-collage/data1/tooltips/hermitcrab.jpg" alt="Hermit crab" /> </a>
<a href="#" title="Islands"><img src="images/demo/puzzle-collage/data1/tooltips/islands.jpg" alt="Islands" /> </a>
<a href="#" title="Hidden lizard"><img src="images/demo/puzzle-collage/data1/tooltips/lizard.jpg" alt="Hidden lizard" /> </a>
<a href="#" title="Amazing nature"><img src="images/demo/puzzle-collage/data1/tooltips/nature.jpg" alt="Amazing nature" /> </a>
<a href="#" title="Stream"><img src="images/demo/puzzle-collage/data1/tooltips/stream.jpg" alt="Stream" /> </a>
<a href="#" title="Fantastic view"><img src="images/demo/puzzle-collage/data1/tooltips/view.jpg" alt="Fantastic view" /> </a>
<div class="ws_shadow"></div>
<script type="text/javascript" src="images/demo/wowslider.js"></script>
<script type="text/javascript" src="images/demo/puzzle-collage/engine1/script.js"></script>
<!-- End WOW Slider.com BODY section -->


This Wow Slider demo adds personality to any website with its puzzle piece slides that showcase photos in an artistic and unique manner. Reminiscent of a collage, this slider becomes the centerpiece of any webpage and is best suited for creative industries and businesses that want to stand out.

HTML5 gallery example

Bordered in white, and with a scrolling photo sidebar to the left, each slide moves into view on the main screen as a small interlocking puzzle piece that grows in size until it fits the entire screen. The corresponding photo on the left-hand sidebar is bordered in blue. After a few seconds the picture recedes into the background and a new puzzle piece photo comes to take its place. The slideshow’s background peeks through between each slide and appears to have a watercolor style using mottled grey, white, and yellow colors. Watching these interlocking pieces move in and out of view is hypnotic and relaxing.

When each slide reaches full-size a white description box with brightly colored blue text appears on the bottom left corner. The text is easy-to-read and features large, Didact Gothic font. This same description appears whenever the mouse hovers over one of the small sidebar pictures. As the slideshow reaches the end it automatically starts over from the beginning. Having a continuous slideshow means that eyes will naturally be drawn to the page movement.

HTML5 gallery tutorial

Changing the speed of the slideshow is easy. To speed up or slow down the slides click on the left and right arrows which appear to each side of the current slide. These arrows only appear when the mouse hovers over an image, and they disappear once the mouse is moved completely off the slider. Also they are colored in white and have some volume effect. This allows for an uninterrupted view of each picture. Another option for slowing down, speeding up, or even skipping ahead and going back is to click on the pictures within the left-hand scrolling sidebar.

Because of its size each picture used in the slideshow should be hi-resolution. This type of slideshow is designed to showcase quality and detailed photos, and users will appreciate the clarity and pleasant visual experience that using larger graphics provides. Not all slideshows are created equal and this Wow Slider demo proves that stepping outside of the box can often result in a more enjoyable user experience.

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