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 develop jQuery CSS Slider!

Fascinate your site viewers with this jQuery CSS Slider! Just watch this video:

  jQuery CSS Slider - Catching Style!

To get more info on transition effect, click on this video here:

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


<!-- Start WOW Slider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><a href="#"><img src="images/demo/flux-slices/data/images/1293441583_nature_forest_morning_in_the_forest_015232_.jpg" alt="" title="Fallen tree" id="wows0"/></a></li>
<li><a href="#"><img src="images/demo/flux-slices/data/images/2685176_b18ba54c.jpg" alt="" title="Forest glade" id="wows1"/></a></li>
<li><a href="#"><img src="images/demo/flux-slices/data/images/611418.jpg" alt="" title="In the woods" id="wows2"/>rays of light show through the trees</a></li>
<li><a href="#"><img src="images/demo/flux-slices/data/images/forest_wallpaper21.jpg" alt="" title="The road in the woods" id="wows3"/></a></li>
<li><a href="#"><img src="images/demo/flux-slices/data/images/g7503.jpg" alt="" title="Sapling" id="wows4"/></a></li>
<li><a href="#"><img src="images/demo/flux-slices/data/images/ge202.jpg" alt="" title="Beauty spot" id="wows5"/></a></li>
<li><a href="#"><img src="images/demo/flux-slices/data/images/mozh_les.jpg" alt="" title="Forested hills" id="wows6"/></a></li>
<li><a href="#"><img src="images/demo/flux-slices/data/images/nature_forest_forest_010852_.jpg" alt="" title="Swamp in the woods" id="wows7"/></a></li>
<li><a href="#"><img src="images/demo/flux-slices/data/images/widescreen_forest_004692_.jpg" alt="" title="Fire in the woods" id="wows8"/></a></li>
<li><a href="#"><img src="images/demo/flux-slices/data/images/world_canada_rain_forest_007534_.jpg" alt="" title="Morning mist over the forest" id="wows9"/></a></li>
<div class="ws_bullets"><div>
<a href="#" title="Fallen tree"><img src="images/demo/flux-slices/data/tooltips/1293441583_nature_forest_morning_in_the_forest_015232_.jpg" alt="Fallen tree"/></a>
<a href="#" title="Forest glade"><img src="images/demo/flux-slices/data/tooltips/2685176_b18ba54c.jpg" alt=""/></a>
<a href="#" title="In the woods"><img src="images/demo/flux-slices/data/tooltips/611418.jpg" alt=""/></a>
<a href="#" title="The road in the woods"><img src="images/demo/flux-slices/data/tooltips/forest_wallpaper21.jpg" alt=""/></a>
<a href="#" title="Sapling"><img src="images/demo/flux-slices/data/tooltips/g7503.jpg" alt=""/> </a>
<a href="#" title="Beauty spot"><img src="images/demo/flux-slices/data/tooltips/ge202.jpg" alt=""/> </a>
<a href="#" title="Forested hills"><img src="images/demo/flux-slices/data/tooltips/mozh_les.jpg" alt=""/> </a>
<a href="#" title="Swamp in the woods"><img src="images/demo/flux-slices/data/tooltips/nature_forest_forest_010852_.jpg" alt=""/> </a>
<a href="#" title="Fire in the woods"><img src="images/demo/flux-slices/data/tooltips/widescreen_forest_004692_.jpg" alt=""/> </a>
<a href="#" title="Morning mist over the forest"><img src="images/demo/flux-slices/data/tooltips/world_canada_rain_forest_007534_.jpg" alt=""/> </a>
<script type="text/javascript" src="images/demo/wowslider.js"></script>
<script type="text/javascript" src="images/demo/flux-slices/engine/script.js"></script>
<!-- End WOW Slider.com BODY section -->


The WOWSlider slideshow is a web code program that displays any desired image in several different ways while allowing the user to scroll through the images at their own pace. It also automatically scrolls through the pictures, providing a nice effect to the webpage it is included on. This description will focus on the components of the WOWSlider and their individual function. The major parts of the slider are: * The Navigation Controls, * The Thumbnails and Descriptions, * The Transition Effects

jQuery Carousel Pagination

The navigation controls allow a visitor to access different images within the slider. There are several different types of navigation, including previous/next arrows, play/pause buttons, and navigation dots. An arrow button is a white round with a blue arrow inside it. This colors matches quite well. There is no play/pause button in this slideshow so you can't stop and start the slider manually. Bullets look similar to an arrow button but smaller in size and have a transparent rounded frame. These controls are unobtrusive and appear on mouseover with the exception of the navigation dots.

The thumbnails and text descriptions help the visitor to identify the content in the slider. Thumbnails appear on mouseover and help the visitor to view the picture they desire. Text descriptions are fully customizable and change with the picture in the slider. The description in this slider uses a Tahoma font. This black writing looks quite good on the white transparent background.

The transition effects are plentiful, 30 in total, each with its own unique transition between images. Some of the transitions use colored shapes, and others use a smooth blending technique to transition between photos.

The WOWSlider is a simple program designed to provide nonprogrammers a classy, colorful, and easy to use/implement slideshow. It can be used in many different purposes and deliver many types of content. It can slide into any website on any device, and best of all, it's free.

jQuery Div Slider & HTML Slider

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