A horizontal sliding accordion for jQuery called AA-Slide

AAS means Accelerated Accordion Slider - and it´s fun!

If you´re looking for a easy to use, customizable and awesome jQuery horizontal slider, this is the one you want to use! With only 2,9kb size in the minified version, the AAS (Accelerated Accordion Slider) comes with a bunch of features like a slide-in caption, auto-margin, choose starting slide, mouseOut event and even more. Take a look at the demos, and make your choise for a better presentation Slide on your website.

Demo 1: Accordion slider with 3 slides

Your easy access to a sliding presentation
Slide with HTML and text
You can easily configure it using its built-in functions, and the more ambitious among you can make your own CSS skins to build truly stunning web presentations - whether you're building anything from an image gallery, to a product tour and lots of things in-between.. Take a peek at what's possible!
Use HTML and real Text inside a slide
Use a picture inside the slide !

Customized with parameters for startpage and a fly in caption from bottom. Regarding the sourcecode to start the sliding action it looks like this:

yourSlide = new $$.xlr8.Accordion((
	    {	container	:	"acc1",
		 start		:	"0",
		 startWidth	:	"40",
		 endWidth	:	"300",
		 speed		:	"600",
		 mouseLeave	:	"0",
		 hasCaption 	: 	"slider_caption",
		 captionMove	:	"120",
		 captionMoveFrom : 	"bottom"
	    });

Demo 2: Accordion slider with 4 slides

4
Accelerate Accordion Slider is cool !
3
Use multiple slides on one Page! Wow!
2
In physics, acceleration is the rate at which the velocity of a body changes with time. In general, velocity and acceleration are vector quantities, with magnitude and direction, though in many cases only magnitude is considered
This is so cool !
1
Slide me in from left,right,top or bottom

Customized with parameters for a startpage and a fly in caption from right. It slides on mouseclick and automated. It has a reset for the slides, returning to where it started, when mouse leaves the slide. Looking at the sourcecode, you´ll see how easy it work:

yourSlide2 = new $$.xlr8.Accordion(
    {		container	:	"acc2",
		 start		:	"3",
		 startWidth	:	"40",
		 endWidth	:	"300",
		 speed		:	"300",
		 mouseLeave	:	"1",
		 hasCaption 	: 	"slider_caption2",
		 captionMove	:	"0",
		 captionMoveFrom :	"left",
		 mouse		:	"click",
		 timeOut	:	"2000"
	    });

Demo 3: Accordion Slider with 5 slides

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5

I know, I know - it looks scary. But wait, see this - with only 3 options given and 5 slides, it still looks awesome. Take a look at the sourcecode needed to start this slider:

yourSlide3 = new $$.xlr8.Accordion(
		    {container		:"acc3",
			 start		:"-1",
			 mouseLeave	:"1"
			});

Ok, there is no caption inside, and the slides width have been made equally. But do it like you want to.

How to install and use

You need jQuery (min. version 1.4). Download the .zip archive from this site (this demo is included), now put the xlr8slide-v1-min.js in your project folder, or upload it to you webspace. Put a <script type="text/javascript" src="xlr8slide-v1-min.js"></script> in your htmlfile head section. And that´s it for the start.

Now you make a simple unordered list, with a identifier given, that should look like this:
<ul id=myaccordion>
<li>Slide content</li>
<li>Slide content</li>
<li>Slide content</li>
</ul>

Last step is to put the starting code in your webpage. It starts to work with only the container-parameter given.

$(document).ready(function() {
	  $$.Accordion.Ready({container:"myaccordion"}
)};

And there you go. For design purposes you should put a div-wrapper around it. And do not forget, if your working like me with a CSS background, then just make a Wrapper inside the <li> alement. Take a look at the demo sourcecode for further informations on styling and integration.

Arguments for the slider

Please be sure to set the arguments and parameters like described below and check capital letters - the arguments are case sensitive.

container: "ID" - This is the ID of the unordered list
start: "number" - Number od the slide which is seen onload. "0" = slide 1, if there should´nt be one opened you need to put in "-1"
startWidth: "number" - Width which the slides should have when closed
endWidth: "number" - Width which the slides should have when opened
speed: "number" - This is the slider speed in ms, 100=superfast, 3000=superslow
mouseLeave: "1|0" - When pointer leaves the container, what should happen then: 0=do nothing, 1=return slides to starting positions
hasCaption: "CLASS" - When using captions, you put the CLASS of the container div here, if not set, there are no fly-in captions
captionMove: "number" - When using captions, this is where you specify the amount of pixels to move from top/left/bottom/right (Just play a little bit around with the Demo)
captionMoveFrom: "top|left|right|bottom" - Fly in caption "captionMove"-pixels from this argument.
captionRotate: "number" - Rotate the caption in number degrees
mouse: "click|over" - What triggers the slides movement, mouse over or mouse click.
timeOut: "number" - Automate the slide, change slide every number ms

Download

I hope you enjoy using this unique jQuery accordion slider.

Release History:
Version: 1.1 (released 12.04.2013) / 2,9kb
Features added:
- Slide automation
- Fixed minor speed issue
- Caption CSS rotaion added
- Fixed minor bugs
- Support added for action-buttons

Version: 1.0 (released 10.04.2013) / 2,4kb

Download newest Version with Demo here // 280kb

author: Andre from xlr8.at

Have a good time !

THE END