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 build a Slider Javascript!

Watch this video and learn more information about building cool sliders without writing a code line!

  Demo Slideshow - Outstading Appearance!

Here you find several ways of livening up your website through responsive animation slider!

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


<!-- Start WOW Slider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="images/demo/emerald-photo/data1/images/cactuses.jpg" alt="Cactuses, Canary Islands" title="Cactuses, Canary Islands" id="wows1_0"/></li>
<li><img src="images/demo/emerald-photo/data1/images/crater.jpg" alt="Crater, Gran Canaria" title="Crater, Gran Canaria" id="wows1_1"/></li>
<li><img src="images/demo/emerald-photo/data1/images/galdar.jpg" alt="Galdar, Gran Canaria" title="Galdar, Gran Canaria" id="wows1_2"/></li>
<li><img src="images/demo/emerald-photo/data1/images/gran_canaria.jpg" alt="Panorama, Gran Canaria" title="Panorama, Gran Canaria" id="wows1_3"/></li>
<li><img src="images/demo/emerald-photo/data1/images/green_rocks.jpg" alt="Green Rocks, Gran Canaria" title="Green Rocks, Gran Canaria" id="wows1_4"/></li>
<li><img src="images/demo/emerald-photo/data1/images/maspalomas.jpg" alt="Maspalomas, Gran Canaria" title="Maspalomas, Gran Canaria" id="wows1_5"/></li>
<div class="ws_bullets"><div>
<a href="#" title="Cactuses, Canary Islands"><img src="images/demo/emerald-photo/data1/tooltips/cactuses.jpg" alt="Cactuses, Canary Islands"/>1</a>
<a href="#" title="Crater, Gran Canaria"><img src="images/demo/emerald-photo/data1/tooltips/crater.jpg" alt="Crater, Gran Canaria"/>2</a>
<a href="#" title="Galdar, Gran Canaria"><img src="images/demo/emerald-photo/data1/tooltips/galdar.jpg" alt="Galdar, Gran Canaria"/>3</a>
<a href="#" title="Panorama, Gran Canaria"><img src="images/demo/emerald-photo/data1/tooltips/gran_canaria.jpg" alt="Panorama, Gran Canaria"/>4</a>
<a href="#" title="Green Rocks, Gran Canaria"><img src="images/demo/emerald-photo/data1/tooltips/green_rocks.jpg" alt="Green Rocks, Gran Canaria"/>5</a>
<a href="#" title="Maspalomas, Gran Canaria"><img src="images/demo/emerald-photo/data1/tooltips/maspalomas.jpg" alt="Maspalomas, Gran Canaria"/>6</a>
<div class="ws_shadow"></div>
<script type="text/javascript" src="images/demo/wowslider.js"></script>
<script type="text/javascript" src="images/demo/emerald-photo/engine1/script.js"></script>
<!-- End WOW Slider.com BODY section -->


This eye catching demo utilizes the appealing ‘photo’ effect. This effect is inspired from the popular photo collages and each transition gives a glimpse of it. Before a new slide comes out, viewers get a glimpse of an entire collage of all the different slides. The overall impact due to this awesome animation is simply stunning. Each time a viewer sees a new slide pop out, one simply cannot help but focus all their attention on it.

Slider javascript code

The slideshow demo is designed with a green theme. This is why the arrows, which are visible only when the pointer moves across the slides, are green angular square with white arrows. The traditional slideshow bullets have been replaced with a green bar divided into several thin rectangles. It is placed in the bottom right corner while the bottom left corner is reserved for the accompanying text box.

Each slide is complemented with a green rectangular text box. The writing is done in white. The overall contrast of green and white is refreshing and soothing for the eyes. The entire demo slideshow doesn’t have a border but in coherence with the theme, there is a green border at the bottom.

No doubt, this demo will be perfectly suited to display a series of colorful pictures in an attractive manner. The collage like ‘photo’ effect will look great when these pictures are full of different contrasting bright colors.

Javascript slider for website

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