A really simple jquery lol slider.

Example and Documentation can be found in Slolder Github page

JQuery v1.6+

Installing? Ain't nobody has time fo that. Just download the damn thing and add it to your HTML with something like this:

<script src="jquery-slolder.js"></script>

There must be a container with all the wannabe slides within it, preferably a unordered list, just for the sake of the best pratices, but any other valid structure should work too, in case you're a hipster and don't like to follow the patterns. For instance:

<ul class="foo">
   <li>Slide 1</li>
   <li>Slide 2</li>
   <li>Slide 3</li>
</ul>

The slides container must have a established height. For instance:

.foo { height: 300px } 

To slolder it up, call the slolder jquery method on the container and behold the magic happening. Like this:

$(".foo").slolder();

Time between each transition, in miliseconds. Default: 5000

$(".foo").slolder({
   interval: 2000
});

Time taken by each transition animation, in miliseconds. Default: 1000

$(".foo").slolder({
   transitionTime: 500
});

Animation function that takes place in each transition. Accespts a string and a function. Default: "fadeDown"

For now, the only two string accepted are: "fadeDown" or "slideUp"

$(".foo").slolder({
   transitionFunction: "slideUp"
});

The function must receive slide as argument, which will be the receiver of the animation, and return its result, otherwise it won't work. For instance:

$(".foo").slolder({
   transitionFunction: function(slide){
      return slide.animate({
         height: "0",
         marginLeft: "-2000px",
         opacity: "0"
      }, 500)
   }
});

$(".foo").slolder({
   interval: 3000,
   transitionTime: 600,
   transitionFunction: "slideUp"
});