Awesome Sliderv1.0

Awesome Slider is a dynamic slideshow which supports variable number of slides. It is bundled with numeric controls — no thumbnails or any other gizmos. The slider supports all sorts of html tags inside its slides, not just images or movies. Sliding is performed manually by user, or default by the slider itself on a given interval.

Awesome Slider is tested with all major browsers: Safari, Internet Explorer*, Firefox, Google Chrome, Opera.

Demos

Check out the demos in the demo page.

Documentation

Awesome Slider requirements

Awesome Slider requires jQuery and "ships" with jQuery 1.4.1.

Installing dependencies

In order for Awesome Slider to function, you need to include jQuery and Awesome Slider javascript files. There's also an optional css file for Awesome Slider's controls styling. However, you can change the styling as you wish. Slider content is not styled at all, as it will receive styling from your website to integrate with it beautifully.

Put the following two lines of code either in the head tag of your html or just before the closing body tag:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/AwesomeSlider.js" type="text/javascript"></script>

Optionally you can also include in your head tag the following code:

<link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />

HTML for Awesome Slider

You need to provide Awesome Slider with a DOM object to work with. If you're using multiple sliders in the same page, make sure they have distinct IDs. You need to place the following in your body tag:

<div class="splash" id="sliderID">
	<div class="splash-content">
		content of first slide
	</div>
	<div class="splash-controls">&nbsp;</div>
</div>

XML file structure of Awesome Slider

<?xml version="1.0" encoding="utf-8"?>
<slideshow>
SLIDE
</slideshow>

Please see below the structure of each SLIDE in the above XML.

XML file structure of Awesome Slider

<slide>
<content>
<![CDATA[
CONTENT
]]>
</content>
</slide>

CONTENT above can be anything you like: html, plain text, img tags, youtube videos etc.

Starting Awesome Slider

To start Awesome Slider you need to know the ID of the html block inserted into your html (just as described above), and the path to the xml data file. Here's how you start it:

AwesomeSlider({
	htmlIdentifier: '#slider_demo_1',
	xmlSource: 'xml/slider_1.xml',
	continuous: true,
	timer: 5000,
	hasFading: true,
	hasHeightToggleing: true,
	fading: 1000,
	HeightToggleing: 1000,
});

Please be advised that calling the AwesomeSlider() function before the inclusion of its .js file will trigger errors.

Arguments explained

• htmlIdentifier: '#slider_demo' - html ID. Class NOT recommended. Argument should be a string that starts with #
• xmlSource: 'slider_demo.xml' - Path to xml source file.
• continuous: true/false - slider will loop automatically/ will not loop
• timer: 1000 - Delay between slides in ms. Used only if continuous is true
• hasFading: true - Enables or disables content fading
• hasHeightToggleing: true - Enables or disables content height toggleing
• heightToggleing: 1000 - Duration to toggle in ms, used only if hasHeightToggleing is true
• fading: 1000 - Duration to fade in ms, used only if hasFading is true

Download

Download version 1 of Awesome Slider.

Support

If you have any troubles in working with Awesome Slider or setting it up, WebRaptor offers support in setting up your custom slider. Please be advised that this doesn't include us setting up hundreds of sliders on your website, but support to getting you through the setup process if the documentation provided here is not enough.

* starting with version 7.