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

  Slideshow jQuery: Working on transitions!

There is no problem with Responsive Slideshow Creation anymore! Just follow this video tutorial!

  Slideshow jQuery: Ravishing Animations!

This video shows different possible transitions and layouts you can apply to using WOW Slider!

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


<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="images/demo/salient-squares/data1/images/dhowboat.jpg" alt="Dhow boat" title="Dhow boat" id="wows1_0"/></li>
<li><img src="images/demo/salient-squares/data1/images/plumeriaalba.jpg" alt="Plumeria alba" title="Plumeria alba" id="wows1_1"/></li>
<li><img src="images/demo/salient-squares/data1/images/sailer.jpg" alt="Sailer" title="Sailer" id="wows1_2"/></li>
<li><img src="images/demo/salient-squares/data1/images/seashells.jpg" alt="Seashells" title="Seashells" id="wows1_3"/></li>
<li><img src="images/demo/salient-squares/data1/images/sunset.jpg" alt="Sunset" title="Sunset" id="wows1_4"/></li>
<li><img src="images/demo/salient-squares/data1/images/urchin.jpg" alt="Urchin" title="Urchin" id="wows1_5"/></li>
<li><img src="images/demo/salient-squares/data1/images/uroabeach.jpg" alt="Uroa beach" title="Uroa beach" id="wows1_6"/></li>
<div class="ws_thumbs">
<a href="#" title="Dhow boat"><img src="images/demo/salient-squares/data1/tooltips/dhowboat.jpg" alt="Dhow boat" /></a>
<a href="#" title="Plumeria alba"><img src="images/demo/salient-squares/data1/tooltips/plumeriaalba.jpg" alt="Plumeria alba" /></a>
<a href="#" title="Sailer"><img src="images/demo/salient-squares/data1/tooltips/sailer.jpg" alt="Sailer" /></a>
<a href="#" title="Seashells"><img src="images/demo/salient-squares/data1/tooltips/seashells.jpg" alt="Seashells" /></a>
<a href="#" title="Sunset"><img src="images/demo/salient-squares/data1/tooltips/sunset.jpg" alt="Sunset" /></a>
<a href="#" title="Urchin"><img src="images/demo/salient-squares/data1/tooltips/urchin.jpg" alt="Urchin" /></a>
<a href="#" title="Uroa beach"><img src="images/demo/salient-squares/data1/tooltips/uroabeach.jpg" alt="Uroa beach" /></a>
<div class="ws_shadow"></div>
<script type="text/javascript" src="images/demo/wowslider.js"></script>
<script type="text/javascript" src="images/demo/salient-squares/engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->


This slider has a unique, three-dimensional design.

The main slide has a grey border with a thin highlight, thin shadow and softer drop shadow. The result is that it looks like a three-dimensional frame. The use of grey keeps it modern and clean.

Below the main slide is a large gradient drop shadow, which is a very modern and clean way of raising the slider away from the main website and making it stand out. This drop shadow would work best on a website that has a lighter background.

Down the left-hand side of the main slide is a set of preview slides, stacked vertically. Each one has a similar grey frame. The preview image that is linked to the current main slide is highlighted by the frame turning white instead of grey.

Hovering over the preview slides makes them scroll up and down, so you can see all the relevant slides. This makes it extremely easy and obvious how to navigate through the slides, making this slider perfect for websites aimed at less tech-savvy users.

There is a subtle hover effect as you mouse-over each preview image, where the colors are slightly darker and richer. This reinforces the fact that these preview images are clickable.

Hovering over the main slide brings up the navigation arrows, one on each side. These arrows are dark grey, and have an embossed look. They have a lighter grey circle background, with a series of semi-transparent borders in dark and light grey. Again, the effect is three-dimensional, and very inviting to click on.

Hovering over the navigation button makes the arrow turn darker, and reinforces the fact you can interact with this element. Clicking on it takes you to the next or previous slide.

There is a caption in the bottom-left corner of the slider. The caption has a semi-transparent grey background and uses a dark grey font. The font used is Marmelad, a rounded san-serif font that is well-balanced with regular proportions. It feels modern, but the rounded lettering keeps it friendly and warm.

The default change effect is called ‘squares’, where the image is gradually replaced by the next one, square by square. It is a simple but elegant effect, which works well with the modern design of the slider. Other change effects that would work well with this design are ‘glass parallax’ and ‘seven’, both of which are modern and smooth.

This slider would work well for modern, professional websites that want to show they are trustworthy. The use of a monochromatic color scheme makes it serious and professional. Sites about finance, small business owners and professional freelancers would all benefit from this slider design.

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