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

  CSS3 Slideshow: How to make it!

A few clicks will suffice for creation of one of the most wonderful slideshows! Here is an example:

  Live on the Website - CSS3 Slideshow!

View your CSS3 slideshow after you have created it! You will get something like this:

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

 

<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="images/demo/pure-domino/data1/images/castlewall.jpg" alt="Castle wall" title="Castle wall" id="wows1_0"/></li>
<li><img src="images/demo/pure-domino/data1/images/landscape.jpg" alt="Scenic landscape" title="Scenic landscape" id="wows1_1"/></li>
<li><img src="images/demo/pure-domino/data1/images/castle.jpg" alt="Medieval castle" title="Medieval castle" id="wows1_2"/></li>
<li><img src="images/demo/pure-domino/data1/images/panorama.jpg" alt="Panorama" title="Panorama" id="wows1_3"/></li>
<li><img src="images/demo/pure-domino/data1/images/terrestrialtelescope.jpg" alt="Terrestrial telescope" title="Terrestrial telescope" id="wows1_4"/></li>
<li><img src="images/demo/pure-domino/data1/images/view.jpg" alt="Amazing view" title="Amazing view" id="wows1_5"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="Castle wall"><img src="images/demo/pure-domino/data1/tooltips/castlewall.jpg" alt="Castle wall"/>1</a>
<a href="#" title="Scenic landscape"><img src="images/demo/pure-domino/data1/tooltips/landscape.jpg" alt="Scenic landscape"/>2</a>
<a href="#" title="Medieval castle"><img src="images/demo/pure-domino/data1/tooltips/castle.jpg" alt="Medieval castle"/>3</a>
<a href="#" title="Panorama"><img src="images/demo/pure-domino/data1/tooltips/panorama.jpg" alt="Panorama"/>4</a>
<a href="#" title="Terrestrial telescope"><img src="images/demo/pure-domino/data1/tooltips/terrestrialtelescope.jpg" alt="Terrestrial telescope"/>5</a>
<a href="#" title="Amazing view"><img src="images/demo/pure-domino/data1/tooltips/view.jpg" alt="Amazing view"/>6</a>
</div></div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="images/demo/wowslider.js"></script>
<script type="text/javascript" src="images/demo/pure-domino/engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->

  DOMINO TRANSITION & PURE LAYOUT CSS3 SLIDESHOW

This slider has a clean and modern design that is both light and attractive.

CSS3 image slideshow

The slider has a narrow white border, that would stand out well against a dark or colored website background. There are no navigational arrows until you hover over the slider, when they appear on each side. The navigational arrows are white, and are contained within a transparent circle with a white border. The overall effect is bold but minimal. Hovering over the navigational arrow makes the circle fill in with a semi-transparent white, that still allows the image below to show through.

You can use the navigation arrows to click through the slides, or return to a previous slide.

In the bottom left corner is a caption. It uses a white font against a semi-transparent rectangle with rounded corners. The rectangle also has a thin white border. The caption is in uppercase, and again the effect is bold but minimalist. The font used in the caption is ‘open sans’, a humanist sans serif font that looks very modern thanks to it’s clean appearance and open forms.

At the bottom of the slider is a series of transparent circles with thin white borders. Each circle represents a slide, and as the current slide comes into view the circle is highlighted by a white dot in the centre.

Hovering over a circle brings up a preview of the relevant slide, again with a thin white border. The preview image also has a semi-transparent white arrow pointing to the relevant circle. Clicking on a circle will cause the slider to skip to the relevant slide, allowing people to navigate directly to the slides they are interested in.

The default transition effect is called domino. The image is overlaid with the next slide, which moves into place across a series of squares. It’s an interesting effect, which feels both clean and modern. There are a number of other change effects to choose from, but if you wanted to retain the modern feel some good options are ‘glass parallax’ and ‘seven’, both of which contain lots of movement and clean, modern lines.

CSS3 slideshow software

The slider only uses the color white, which means it’s very minimal in feel, but the clever use of transparency stops it from becoming too simplistic. Overall, the design is very well thought out.

This slider would be fantastic for websites with a monochrome color scheme. It would also work well with any clean, minimalist design. Technology companies, and modern learning institutions would benefit from this slider.

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