Professional Website Design, Graphic Designers, Ecommerce and SEO Resource Blog

What is it?

A jQuery slider plugin. Used to take a list of elements, and show a small amount of them, then using a sliding animation, display new ones.

Why another slider?

There are some really great plugins out there that do this exact same thing. A lot of the are jam packed full of features you will never use. Others require specific markup. Some need an external css file to function properly. Others have no good documentation, and I couldn’t figure out how to make them work. Plus, this is a good exercise for me!

How does it work?

First you need to include jQuery, and the JustSlide plugin. Next you will just write a bit of javascript.

    var options = {
        display: 2,                  // This is the number of items to show at any given time. Default is 2
        slide: 1,                      // This is how many items to slide to the left or right at a time. Default is 1
        speed: 'slow',              // This is the speed of the animation. Any normal jQuery speed
        next: '#my_next_link', // If you don't supply this, I'll make one for ya
        prev: '#my_prev_link'  // If you don't supply this, I'll make one for ya
    }
    jQuery(function() {
        $('#slider').justslide(options);
    });

Now write your HTML the way you want. For me, I would write something like…

<div id="slider">
	<div class="slide">stuff in here</div>
	<div class="slide">more stuff in here</div>
	<div class="slide">even more stuff in here</div>
</div>

That’s it!

Download it, and check out the examples here
Just Slide on Github

Tags: javascript, jquery