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: HTML5 Image Slider!

This video can help you to create splendid image sliders like this!

  Demo Slideshow - Outstading Appearance!

Watch what you can make using WOW Slider application!

  HTML5 Image Slider 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 Image Slider to appear:


<!-- Start WOW Slider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><a href="#"><img src="images/demo/crystal-basic/data/images/amsterdam.jpg" alt="Overlooking amsterdam" title="Overlooking amsterdam" id="wows0"/></a></li>
<li><a href="#"><img src="images/demo/crystal-basic/data/images/barpark.jpg" alt="Brownsville Bar Park" title="Brownsville Bar Park" id="wows1"/></a></li>
<li><a href="#"><img src="images/demo/crystal-basic/data/images/florence.jpg" alt="Florence" title="Florence" id="wows2"/></a></li>
<li><a href="#"><img src="images/demo/crystal-basic/data/images/gate.jpg" alt="Golden Gate, California" title="Golden Gate, California" id="wows3"/></a></li>
<li><a href="#"><img src="images/demo/crystal-basic/data/images/ny.jpg" alt="Night Panorama NYC From Jersey" title="Night Panorama NYC From Jersey" id="wows4"/></a></li>
<li><a href="#"><img src="images/demo/crystal-basic/data/images/panorama.jpg" alt="Panorama Herengracht from bridge Leidsegracht" title="Panorama Herengracht from bridge Leidsegracht" id="wows5"/></a></li>
<li><a href="#"><img src="images/demo/crystal-basic/data/images/port.jpg" alt="Heraklion old port" title="Heraklion old port" id="wows6"/></a></li>
<li><a href="#"><img src="images/demo/crystal-basic/data/images/praga.jpg" alt="Prague" title="Prague" id="wows7"/></a></li>
<li><a href="#"><img src="images/demo/crystal-basic/data/images/santorini.jpg" alt="Panorama of Oia, Santorini" title="Panorama of Oia, Santorini" id="wows8"/>Oia (in Santorini, Greece) remains one of the foremost tourist attractions of the Aegean Sea.</a></li>
<li><a href="#"><img src="images/demo/crystal-basic/data/images/seul.jpg" alt="Seoul sunrise" title="Seoul sunrise" id="wows9"/></a></li>
<div class="ws_bullets"><div>
<a href="#" title="Overlooking amsterdam"><img src="images/demo/crystal-basic/data/tooltips/amsterdam.jpg" alt="Overlooking amsterdam"/>1 </a>
<a href="#" title="Brownsville Bar Park"><img src="images/demo/crystal-basic/data/tooltips/barpark.jpg" alt="Brownsville Bar Park"/>2 </a>
<a href="#" title="Florence"><img src="images/demo/crystal-basic/data/tooltips/florence.jpg" alt="Florence"/>3 </a>
<a href="#" title="Golden Gate, California"><img src="images/demo/crystal-basic/data/tooltips/gate.jpg" alt="Golden Gate"/>4 </a>
<a href="#" title="Night Panorama NYC From Jersey"><img src="images/demo/crystal-basic/data/tooltips/ny.jpg" alt="Night Panorama NYC From Jersey"/>5 </a>
<a href="#" title="Panorama Herengracht from bridge Leidsegracht"><img src="images/demo/crystal-basic/data/tooltips/panorama.jpg" alt="Panorama Herengracht from bridge Leidsegracht"/>6 </a>
<a href="#" title="Heraklion old port"><img src="images/demo/crystal-basic/data/tooltips/port.jpg" alt="Heraklion old port"/>7 </a>
<a href="#" title="Prague"><img src="images/demo/crystal-basic/data/tooltips/praga.jpg" alt="Prague"/>8 </a>
<a href="#" title="Panorama of Oia, Santorini"><img src="images/demo/crystal-basic/data/tooltips/santorini.jpg" alt="Panorama of Oia, Santorini"/>9 </a>
<a href="#" title="Seoul sunrise"><img src="images/demo/crystal-basic/data/tooltips/seul.jpg" alt="Seoul sunrise"/>10 </a>
<a href="#" class="ws_frame"></a>
<div class="ws_shadow"></div>
<script type="text/javascript" src="images/demo/wowslider.js"></script>
<script type="text/javascript" src="images/demo/crystal-basic/engine/script.js"></script>
<!-- End WOW Slider.com BODY section -->


Using the "simplicity is key" factor, this demo features a very minimalist design. It has a black tinted transparent thin border around the frame that just slightly shows the picture behind it, enhancing the upfront picture even more. For navigating slides, it has left and right arrows attached outside the rectangle in white semi-circles and simple black left/right arrows. At the top right corner, there are plain transparent white bullets for quick jumping to slides, and when each bullet is prompted, it shows a thumbnail of the picture it contains, bordered with a white frame. The browsing of slides is made easy, as these bullets are responsive and quick. The text box for the title/description of each slide is located at the bottom left - it is a simple tinted transparent black rectangular box with bold white transparent text that is easy to read. Each textbox quickly changes text along with each slide.

HTML5 Horizontal Slider

There is a 4 second pause for each slide, which is appropriate for a quick view, then the image slide transitions into the next slide. The transition is in a smooth, sliding form, which kind of looks like the upcoming image pushes back the current one in its wake. At the end of the slide, all the slides quickly pass by in reverse and the slide reaches its first image again.

jQuery HTML5 Image Slider

With easy navigation features and a simple yet attractive design layout, this slideshow can suit many websites. Business websites, real estate websites and even travel websites can take the help of this slideshow to show their best features in a creative way. Your visitors will be able to see what you are offering, without a fuss. The design is simple so it will go along with any website design or theme. Pictures are a great way to exhibit your business and this slideshow provides that and your users will not even have to browse around for the pictures. They can easily view or navigate with mouse-over to see you offer or what your company is all about with this decent and modest slideshow.

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