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: Automatic jQuery Slider!

Design your own beautiful Automatic Slideshow like in this video without writing any line of code!

  Automatic jQuery Slider: Staggering Layouts!

Here is an example of what you can create using WOW Slider!

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


<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="images/demo/noir-squares/data/images/clody.jpg" alt="Cloudy Lagoon" title="Cloudy Lagoon" id="wows0"/></li>
<li><img src="images/demo/noir-squares/data/images/heaven.jpg" alt="heaven" title="heaven" id="wows1"/></li>
<li><img src="images/demo/noir-squares/data/images/park.jpg" alt="park" title="park" id="wows2"/></li>
<li><img src="images/demo/noir-squares/data/images/pool.jpg" alt="pool" title="pool" id="wows3"/></li>
<li><img src="images/demo/noir-squares/data/images/provence.jpg" alt="provence" title="provence" id="wows4"/></li>
<li><img src="images/demo/noir-squares/data/images/reef.jpg" alt="reef" title="reef" id="wows5"/></li>
<li><img src="images/demo/noir-squares/data/images/river.jpg" alt="river" title="river" id="wows6"/></li>
<li><img src="images/demo/noir-squares/data/images/saarschleife.jpg" alt="saarschleife" title="saarschleife" id="wows7"/></li>
<li><img src="images/demo/noir-squares/data/images/sur.jpg" alt="sur" title="sur" id="wows8"/></li>
<li><img src="images/demo/noir-squares/data/images/sweden.jpg" alt="sweden" title="sweden" id="wows9"/></li>
<div class="ws_bullets"><div>
<a href="#" title="clody"><img src="images/demo/noir-squares/data/tooltips/clody.jpg" alt="clody"/>1</a>
<a href="#" title="heaven"><img src="images/demo/noir-squares/data/tooltips/heaven.jpg" alt="heaven"/>2</a>
<a href="#" title="park"><img src="images/demo/noir-squares/data/tooltips/park.jpg" alt="parkr"/>3</a>
<a href="#" title="pool"><img src="images/demo/noir-squares/data/tooltips/pool.jpg" alt="pool"/>4</a>
<a href="#" title="provence"><img src="images/demo/noir-squares/data/tooltips/provence.jpg" alt="provence"/>5</a>
<a href="#" title="reef"><img src="images/demo/noir-squares/data/tooltips/reef.jpg" alt="reef"/>6</a>
<a href="#" title="river"><img src="images/demo/noir-squares/data/tooltips/river.jpg" alt="river"/>7</a>
<a href="#" title="saarschleife"><img src="images/demo/noir-squares/data/tooltips/saarschleife.jpg" alt="saarschleife"/>8</a>
<a href="#" title="sur"><img src="images/demo/noir-squares/data/tooltips/sur.jpg" alt="sur"/>9</a>
<a href="#" title="sweden"><img src="images/demo/noir-squares/data/tooltips/sweden.jpg" alt="sweden"/>10</a>
<div class="ws_shadow"></div>
<script type="text/javascript" src="images/demo/wowslider.js"></script>
<script type="text/javascript" src="images/demo/noir-squares/engine/script.js"></script>
<!-- End WOWSlider.com BODY section -->


At first glance this slideshow demo is modest and conservative. However, upon further inspection users will notice the details that take this demo from basic to distinctive, including its unique transitions and hidden thumbnail gallery. Websites with a traditional design approach will appreciate the professional-with-a-twist style used to showcase this slider.

Simple Automatic jQuery Slider

The borderless frame around the slideshow ensures that any picture used will gain full attention. The bottom of the slider features a subtle 3D shadow, which makes the WOWSlider appear to pop out at viewers. In keeping with its clean style, a thumbnail gallery of all the pictures is placed within the actual slide itself. The gallery only appears when users hover over a line of white dots located in the top right hand corner. Each dot represents a picture in the slide with the current slide highlighted as a black dot bordered in white. It’s easy for users to jump to a new picture within the slide by clicking on a new dot, and by hovering over their chosen picture they can also preview each slides header.

To the right and left of the frame there are two arrows which only appear when the mouse hovers over the slide. Each arrow allows users to go forwards or backwards within the slideshow. The bottom left hand corner features a black header box with an uppercase header using contrasting, white, Helvetica text.

The highlight of this slideshow is the transition from one slide to the next. Each transition features geometric squares emerging in succession until the screen is filled with a new slide, but each transition still remains unique from each other. One transition features the geometric squares developing in a spiral pattern, another transition features these same squares materializing from top to bottom, and still another features squares randomly popping up. The effect is creative and gives the WOWSlider an artistic detail which takes it from boring to innovative.

Automatic Image Slider

Many traditional businesses have a classic style and design, and they want a slider that conveys a buttoned-up image while showcasing creative details that allow them to stand out. This slider gives them the best of both worlds while bringing fluidity and movement to their website, an important aspect of web design. Paying attention to these types of details will ultimately increase the quality of a user’s experience leading to more engagement and more business overall.

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