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 
  • css gallery business css design gallery The berenike haar constellation
  • css gallery code gallery css Barred Spiral Galaxy
  • css gallery design css website gallery Universe Raumfahrt
  • css gallery example css gallery template
  • css gallery furniture best css gallery
css gallery business css gallery code 1 css gallery code gallery css template 2 css gallery design html css gallery 3 css gallery example css photo gallery 4 css gallery furniture gallery html css 5
css gallery image

More Demos

  Video Tutorial: CSS Gallery!

This video can help you develop mobile-friendly CSS Galleries in a quick and simple manner!

  Demo CSS Gallery - Wonderful Layout!

In this video you can learn about transition effects which can be used for website sliders!

  CSS Gallery 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 CSS Gallery to appear:


<!-- Start WOW Slider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="images/demo/galaxy-collage/data1/images/ngc456511635.jpg" alt="css gallery business" title="Galaxy" id="wows1_0"/>The berenike haar constellation</li>
<li><img src="images/demo/galaxy-collage/data1/images/galaxy10994.jpg" alt="css gallery code" title="Galaxy" id="wows1_1"/>Barred Spiral Galaxy</li>
<li><img src="images/demo/galaxy-collage/data1/images/galaxy252885.jpg" alt="css gallery design" title="Galaxy" id="wows1_2"/>Universe Raumfahrt</li>
<li><img src="images/demo/galaxy-collage/data1/images/milkyway67504.jpg" alt="css gallery example" title="Galaxy" id="wows1_3"/></li>
<li><img src="images/demo/galaxy-collage/data1/images/galaxy74005.jpg" alt="css gallery furniture" title="Tarantula Nebula" id="wows1_4"/></li>
<div class="ws_bullets"><div>
<a href="#" title="Galaxy"><img src="images/demo/galaxy-collage/data1/tooltips/ngc456511635.jpg" alt="css gallery business"/>1</a>
<a href="#" title="Galaxy"><img src="images/demo/galaxy-collage/data1/tooltips/galaxy10994.jpg" alt="css gallery code"/>2</a>
<a href="#" title="Galaxy"><img src="images/demo/galaxy-collage/data1/tooltips/galaxy252885.jpg" alt="css gallery design"/>3</a>
<a href="#" title="Galaxy"><img src="images/demo/galaxy-collage/data1/tooltips/milkyway67504.jpg" alt="css gallery example"/>4</a>
<a href="#" title="Tarantula Nebula"><img src="images/demo/galaxy-collage/data1/tooltips/galaxy74005.jpg" alt="css gallery furniture"/>5</a>
<div class="ws_shadow"></div>
<script type="text/javascript" src="images/demo/wowslider.js"></script>
<script type="text/javascript" src="images/demo/galaxy-collage/engine1/script.js"></script>
<!-- End WOW Slider.com BODY section -->


This slider is simple but stunning. The images take your full attention, with very little distracting detail from the slider design.

There is no frame or border effect around the slides, so your images take pride of place and can take up the maximum amount of space. When you are not interacting with the slider, there are no navigation arrows displayed, again allowing the images to stand on their own.

When you hover over the slider, two navigation arrows appear. They are very simple, a thin black arrowhead against a white triangle background. It is modern and minimalist in style and take up very little space.

CSS Gallery app

In the bottom-right corner are a series of white dots, which represent slides. These again are small and unobtrusive. A second white ring appears around the dot which represents the current slide. If you hover over the dots, a slide preview appears in a white frame and allows you to navigate to the slide you want to see.

Unlike other sliders, there is no way to ‘pause’ the slideshow. Hovering over the images does not stop them from cycling through, and there are no pause controls on the slider. This is a deliberate choice, by stripping away extraneous detail the slider can focus on its core job — displaying a set of stunning images.

A caption appears in the bottom left corner, in white text with no background. There is a title, in a larger size and all capitals. A smaller subtitle appears below, in normal lettering.

The font used for the caption is Roboto Condensed, a very modern, geometric san-serif font. However, by allowing letters to settle to a natural width, this font allows for a natural reading rhythm. Because it is condensed, the caption takes up a small amount of space and because there is no background to the captions, the captions do not distract from the images. However, this does mean you will need to use dark images for the captions to show up.

CSS Gallery for website

The slider is responsive, re-sizing itself proportionally to fit any screen-size. There are a number of ‘change effects’ to choose from, but the default ‘collage’ effect is modern and simple and works well with the design.

The overall effect is a clean, simple and minimalist slider design that allows the images in the slides to come to the full attention of the user. This slider would be ideal for anyone needing to show off fantastic images — a photography website, an artist looking to display their artwork or a hotel or travel agency with a series of beautiful exotic landscapes to display.

Because it is so clean and modern, this slider design would also be a great choice for a technology or robotics website, or science-fiction author.

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