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>

Last step is to put the starting code in your webpage. It starts to work with only the container-parameter given.
$(document).ready(function() {

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.


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 !