How to add a slider to Google Sites

1. Create a slider using WOWSlider app.

You can find more info about it here: tutorial 1, tutorial 2

If you create the slider with the filmstrip or thumbnails you'll have to manually rename all generated images for them in the generated folder.

2. Create the file for WOWSlider gadget.

Open any text editor (for example Notepad) and insert the following code:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="WOWSlider test" height="100">
<Require feature="dynamic-height"/></ModulePrefs>
 <Content type="html">
 <![CDATA[
 
 Here is the place for WOWSlider code.
 
 ]]>
 </Content>
</Module>

3. Place WOWslider code into the gadget file.

Open the generated 'wowslider-howto.html' file from the folder where you have published your slider.

Copy a code for the HEAD and BODY sections.

Paste it into the text document for our gadget.

Notice you should change the paths to the WOWslider files ("your_site" is your domain name):

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="WOWSlider test" height="100">
<Require feature="dynamic-height"/></ModulePrefs>
 <Content type="html">
 <![CDATA[
 
	<!-- Start WOWSlider.com HEAD section -->
	<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/your_site/style.css" />
	<script type="text/javascript" src="https://sites.google.com/site/your_site/jquery.js"></script>
	<!-- End WOWSlider.com HEAD section -->

	<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
	<div id="wowslider-container1">
	<div class="ws_images"><ul>
		<li><div class="img"><img src="https://sites.google.com/site/your_site/1.jpg" alt="1" title="1" id="wows1_0"/></div></li>
		<li><div class="img"><img src="https://sites.google.com/site/your_site/2.jpg" alt="2" title="2" id="wows1_1"/></div></li>
		<li><div class="img"><img src="https://sites.google.com/site/your_site/3.jpg" alt="3" title="3" id="wows1_2"/></div></li>
		<li><div class="img"><img src="https://sites.google.com/site/your_site/4.jpg" alt="4" title="4" id="wows1_3"/></div></li>
	</ul></div>

	<div class="ws_shadow"></div>
	</div>	
	<script type="text/javascript" src="https://sites.google.com/site/your_site/wowslider.js"></script>
	<script type="text/javascript" src="https://sites.google.com/site/your_site/script.js"></script>
	<!-- End WOWSlider.com BODY section -->
 
 ]]>
 </Content>
</Module>