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
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
4Accelerate Accordion Slider is cool !
3
Use multiple slides on one Page! Wow!
2In 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 !
1Slide 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