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 

This slider is now avalable with our Free Website Builder!

The builder comes with 600+ awesome website blocks: image galleries, lightboxes, image carousels, counters, countdowns, full-screen intros, features, data tables, pricing tables, progress bar, timelines, tabs, accordions, call-to-action, forms, maps, social blocks, testimonials, footers, and more... Free for commercial use.

Free HTML Templates

More Demos

  CSS3 Slider: How-to Video!

This Video shows you the way you can create your own responsive CSS3 Slider!

  CSS3 Slider - Charming Style!

Here you can watch the slideshow working on the webpage!

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


<!-- Start WOW Slider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/blueberry410655_1280_1.jpg" alt="Blueberry" title="Blueberry" id="wows1_0"/></li>
<li><img src="data1/images/2anita_foto.jpg" alt="Raspberries" title="Raspberries" id="wows1_1"/></li>
<li><img src="data1/images/blackberries9390_1280.jpg" alt="Blackberries" title="Blackberries" id="wows1_2"/></li>
<li><img src="data1/images/background2277_1280_1.jpg" alt="Mix" title="Mix" id="wows1_3"/></li>
<div class="ws_bullets"><div>
<a href="#" title="Blueberry"><img src="data1/tooltips/blueberry410655_1280_1.jpg" alt="Blueberry"/></a>
<a href="#" title="Raspberries"><img src="data1/tooltips/2anita_foto.jpg" alt="Raspberries"/></a>
<a href="#" title="Blackberries"><img src="data1/tooltips/blackberries9390_1280.jpg" alt="Blackberries"/></a>
<a href="#" title="Mix"><img src="data1/tooltips/background2277_1280_1.jpg" alt="Mix"/></a>
<div class="ws_shadow"></div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOW Slider.com BODY section -->


This is a demo with Easy pattern and Bubbles animation. Arrows are quite simple - plain and clear white lines. The frame is also ordinary. It is a standard white-colored rectangle. Bullets are small white circles placed in a low right corner. Descriptions are in a low left corner and built with the help of a simple white rectangle which perfectly matches with the entire template. The descriptions use the stylish Exo 2 font.

The modern-looking Bubbles effect is not as simple as the template. It consists of several colored circles which overlap each other and appear from the middle of the screen and can disappear in 2 directions: back in middle or to the bottom of the page. These effects always use different easing functions and CSS3 hardware-accelerated transitions. The color of the circles comes from the pictures in your slider and completely fits every slide. The combination between simple Easy template and modern Bubbles effect makes a harmonious and balanced slider.


If you want to create this demo, you should select Easy skin and Bubbles Effect on the right side of an application window.

css3 image slider

Then click 'More settings' button situated in the low right corner. Go to 'General' tab, uncheck 'Play/pause button' option and change the description effect to 'Fade'. Other settings remain default.

css3 carousel

Using the live preview area of the slideshow, you can control all of the features. This allows you to discover really how your project will look before you publish. This "on-the-fly" ability-based personalization is either fun and quick.


I want to be able to change the images without refreshing the page, how can I do? Should I call repeatedly the jQuery("#wowslider-container1").wowSlider or is there a more elegant solution?

Sorry, we can't provide you with a more elegant solution.

hello, I downloaded the sofware, registered, and it seems to be working almost perfectly. the image seems to jump slightly between when it arrives and leaves. Is there a way to make this not happen as really breaks the light, sliding sensation.

Sorry, I don't see this issue. What browser do you use?

firefox 42.0 is the browser I was using for the description I gave and in Safari Version 5.1.10 (6534.59.10), the slideshow blinks after each image slides into the frame. both are used on a mac osx.

Please add these lines to your .css file:

#wowslider-container3 ul li {
    list-style: disc outside none;
    text-align: left;

Hope this helps!

thanks for the lines of css which seems to resolve the firfox bug. However, the safari issue is still present (see previous email). Is there a css fix for that as well?

I can't reproduce this issue in the current version of Safari.. your version of Safari is out of date.

I tried the WOW Slider program, it's simple to use and the resulted HTML program did provide decent display of pictures user entered.The problem I encountered is that the photo was chopped off to fit the display format. The logical way of resize the picture is to reduce the picture by proportion so that no part of the original photo will be clipped off. Does the WOW Slider have the option for the user to reduce the photo by proportion? I was held back to purchase this WOW Slider program for the lack of this option. Please explain what is the alternate way this program might provide. I can't find any instructions on how to use this program.

It seems that you use a full-width layout.

css3 slideshow

You should create a slider with a boxed layout.

Then find style.css and remove 'max-width' and 'max-height' properties from these selectors:

1) #wowslider-container1
2) #wowslider-container1 .ws_images
3) #wowslider-container1 .ws_images ul a
4) #wowslider-container1 .ws_images > div > img
Please check it.

How do I remove the black square boxes (It shows the picture on display) from the galleries? How do I add water mark or caption to the images of the slider? Your prompt reply will be much appreciated. By the way I had recently purchased a unlimited websites version of WOWSlider.

Please check this instruction: http://wowslider.com/help/watermark-in-wowslider-27.html

I have created a slide show and up-load to my web server. For some reasons, the pictures were stripped. I did try two approaches: up-load my slide by suing ftp and also by up-load the slide to WordPress. Both methods were failed to up-load the slide successfully. I did place the html program, pictures and related files in the same folder. What did I do wrong in this up-load approach? Please advice the correct way of doing the up-load.

Please send us the link to the page with your issue, we'll check it.

Another question: How do I install WOWSlider app on WordPress?

css3 image slider

Here is the instruction on how to add a slider to Wordpress: http://wowslider.com/help/add-wowslider-wordpress-34.html

I purchased WOW slider a few years ago. I have version 3.4. Can I get a new version 7.0 ?

It seems that you have ordered this version earlier.

I would like to wow slider for purchase to make my specially logo as a watermark visible. I have a photo studio and make my website myself.

I have some photo studios saw on the website that when an image is clicked, sets the slideshow on the website. That is, so to speak as an overlay. At the edges, you can see the actual page yet and when closing the slide show is completed with this picture what I have clicked previously.

How does this work? Unfortunately I can on your website (Wow Solider) find no such question. Could you please help me there, so I can get this going?

I recently bought WOW slider and have just got around to using it for the first time - and it keeps crashing! I can get as far as adding the images to the slider, but when I try to do anything else it very soon crashes. Can you please suggest how I can fix this problem.

Please try to disable "Show preview" in Option. This may help you.

Thanks for your quick reply. That has fixed the crashing problem, though it is rather awkward not having a preview instead of having to publish the slideshow to view it - is this something that will be fixed?

Other than that, I'm very happy with the program, it does just what I wanted in an easy-to-use manner and the end result looks good.

Sorry for the inconvenience, we working hard on this problem. Please stay tuned for the updates, we will fix it.

I have a slideshow of images that works OK until it gets to the last image; this is then duplicated i.e. the slide moves on to the same image again (it has not been included twice in the slideshow), then the whole slideshow rapidly rewinds to the beginning. I would like the slides to continue displaying in an endless loop, in the same order, i.e. going form the last one (not duplicated!) to the first one without the viewer seeing the fast rewind on screen. Can this be done?

Did the problem with WOWSlider crashing if 'preview' was used ever get resolved?

Sorry to have bothered you with this, but I've found the answer to the first question within your website's help section - I was using 'Basic' transition and have changed it to 'Basic Linear'.

Comments are closed

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