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

  Responsive CSS3 Image Slider in minutes!

With WOW Slider software you can build responsive CSS3 Image Sliders like this!

  Photo slideshow on the page!

Here you can see versatile transition effects you can use in your own slideshow!

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


<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="images/demo/book-book/data1/images/amsterdam.jpg" alt="Amsterdam, the Netherlands" title="Amsterdam, the Netherlands" id="wows1_0"/></li>
<li><img src="images/demo/book-book/data1/images/delft.jpg" alt="Delft, the Netherlands" title="Delft, the Netherlands" id="wows1_1"/></li>
<li><img src="images/demo/book-book/data1/images/giethoorn.jpg" alt="Giethoorn, the Netherlands" title="Giethoorn, the Netherlands" id="wows1_2"/></li>
<li><img src="images/demo/book-book/data1/images/belgium.jpg" alt="Bruges, Belgium" title="Bruges, Belgium" id="wows1_3"/></li>
<li><img src="images/demo/book-book/data1/images/bruges.jpg" alt="Bruges, Belgium" title="Bruges, Belgium" id="wows1_4"/></li>
<li><img src="images/demo/book-book/data1/images/etretat.jpg" alt="Étretat, France" title="Étretat, France" id="wows1_5"/></li>
<li><img src="images/demo/book-book/data1/images/france.jpg" alt="Étretat, France" title="Étretat, France" id="wows1_6"/></li>
<div class="ws_bullets"><div>
<a href="#" title="Amsterdam, the Netherlands"><img src="images/demo/book-book/data1/tooltips/amsterdam.jpg" alt="Amsterdam, the Netherlands"/>1</a>
<a href="#" title="Delft, the Netherlands"><img src="images/demo/book-book/data1/tooltips/delft.jpg" alt="Delft, the Netherlands"/>2</a>
<a href="#" title="Giethoorn, the Netherlands"><img src="images/demo/book-book/data1/tooltips/giethoorn.jpg" alt="Giethoorn, the Netherlands"/>3</a>
<a href="#" title="Bruges, Belgium"><img src="images/demo/book-book/data1/tooltips/belgium.jpg" alt="Bruges, Belgium"/>4</a>
<a href="#" title="Bruges, Belgium"><img src="images/demo/book-book/data1/tooltips/bruges.jpg" alt="Bruges, Belgium"/>5</a>
<a href="#" title="Étretat, France"><img src="images/demo/book-book/data1/tooltips/etretat.jpg" alt="Étretat, France"/>6</a>
<a href="#" title="Étretat, France"><img src="images/demo/book-book/data1/tooltips/france.jpg" alt="Étretat, France"/>7</a>
<div class="ws_shadow"></div>
<script type="text/javascript" src="images/demo/wowslider.js"></script>
<script type="text/javascript" src="images/demo/book-book/engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->


This slider mimics the look and feel of an old book. Skeuomorphism is not often seen in slider design, which makes this one quite different and eye-catching.

The slider is also quite different in that it shows two images at once, on opposite ‘pages’. This means the slider works exceptionally well for square images, unlike most sliders which are designed to work with landscape images. The two slides are linked under a single caption, so you need to make sure your images work together in pairs. It’s fantastic for showing a single product in two different ways, for example a wide-angle view that shows the whole image, and then a close up of a detail.

CSS3 image slider download

The slides appear within a ‘cover and pages’ frame, that looks like an antique, leather-bound book. Hovering over the slider brings up two very ornate, golden navigational arrows, one on each side. These arrows enable you to click through the pages, or return to a previous page.

There is a caption in the bottom left corner. This emerges directly from the ‘page’ frame, and the background is the same color. This means the caption feels like part of the book, and reinforces the realistic effect.

The font used is Lobster. This is a fantastic font, that uses multiple versions of letters and ligatures to create a joined-up, handwritten effect that is extremely natural and realistic. A subtle ‘embossing’ effect finishes the lettering, making it feel both handwritten and sophisticated, like the embossed letters on a hand-bound journal.

At the bottom right is a series of circles, each one representing a slide. The same care and attention has been shown to these circles, and each one feels like an antique golden button, with a centre dot that has been ‘stamped’ out, thanks to slightly irregular edges. When the current slide is highlighted, the button-hole contracts slightly.

Hovering over the buttons brings up a preview of each set of slides, contained within a gold frame, and with a slight drop-shadow behind. You can use the buttons to jump to different slides.

The combination of realistic leather, embossing and drop-shadows makes this slider feel realistic and touchable. It would work well on touch-screens, thanks to the way it invites you to touch the pages.

CSS3 image rotator

The default change effect is the perfect one, as it mimics the turning pages of a book. Whilst you do have a choice of transition effects, the ‘book’ really does work exceptionally well with the slider design.

This slider is perfect for anyone who wants to mimic an expensive, old-fashioned feel. Antique dealers, fantasy authors, and anyone who sells hand-made products would benefit from using this slider.

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