Philippe Masset

Web developer and entrepreneur.

DIYSlider, the most lightweight and customizable jQuery slider

This is not a fancy slider

This plugin is a foundation on which you'll build a slider yourself, one that really fits your needs.

That's why it's so lightweight: only 3.56kb, and 1.14kb gzipped!

It'll allow you to transform a bunch of divs into a slidable thingy with a whole lot of options, methods and events, but nothing more. The rest you'll have to do yourself.

If you need a timer to slide automatically, well DIY. If you need buttons to change slides, DIY!

Now let's see how we could slide some cats!

Back - Forth - Go to slide #3

Other live examples

  1. Slider with multiple controls and event handlers
  2. Automatic slideshow

Basic usage

HTML

<div class="slider"><!-- The slider -->
    <div><!-- A mandatory div used by the slider -->
        <!-- Each div below is considered a slide -->
        <div><img src="http://placekitten.com/g/400/300"/></div>
        <div><img src="http://placekitten.com/g/400/200"/></div>
        <div><img src="http://placekitten.com/g/200/300"/></div>
        <div><img src="http://placekitten.com/g/300/200"/></div>
    </div>
</div>

JavaScript

$(".slider").diyslider(); // this is all you need!

jQuery.DIYSlider options

width (string, default: '500px')

height (string, default: '300px')

Dimensions of the slider.

animationAxis (string, default: 'x')

Axis of the animation. Slides can be animated horizontally or vertically ('x' or 'y').

animationDuration (number, default: 1000)

Duration of the animation between slides in milliseconds. Set to 0 for an instant change (no animation).

animationEasing (string, default: 'swing')

Easing function used for the animation. If you want more easing functions than 'swing' and 'linear', you should have a look at jQuery UI.

loop (boolean, default: true)

Whether to loop on slides or not.

display (number, default: 1)

Number of slides displayed at once in the slider's frame.

start (number, default: 1)

What slide to start at. Will default to 1 if an invalid slide number is given.

jQuery.DIYSlider methods

Change slide

Change slide using the move() function and passing it a direction ('forth' or 'back') or a slide number.

Set the second parameter to true if you want this change of slide to occur instantly.

// Go to the next slide
$(".slider").diyslider("move", "forth");

// Go to the previous slide
$(".slider").diyslider("move", "back");

// Go to slide #3
$(".slider").diyslider("move", 3);

// Go to slide #3 instantly, without animation
$(".slider").diyslider("move", 3, true);

Get the slides count

Get the slider's total number of slides with getSlidesCount().

var slidesCount = $(".slider").diyslider("getSlidesCount");

Update ANY option on the fly

Yes, you can update every option of the slider whenever you want, even after it's been instantiated. Change the number of slides visible in the slider's frame, the slider's width and height, the easing function, the animation duration, whether slides will glide horizontally or vertically... You can change anything, anytime. You only have to use updateOptions().

// We feel the urge of turning the slider into a 400x200 box, with a faster animation, two slides displayed at once and looping disabled
$(".slider").diyslider("updateOptions", {
    width: "400px",
    height: "200px",
    animationDuration: 300,
    display: 2,
    loop: false
});

Bonus: click here, and a new button will appear under the example slider (at the top of the page). If you click on that new button, the code above will be executed. Please, try it!

Resize the slider

The resize() function is a shorthand for updateOptions() if you only want to update the slider's dimensions. This function needs two string parameters: the width and height, with the "px" suffix, to which you want to resize the slider.

// Make the slider 400px large and 200px high
$(".slider").diyslider("resize", "400px", "200px");

jQuery.DIYSlider events

Please note that these events are within the 'diyslider' namespace.

moving.diyslider

Fired when the slider starts moving (at the start of a slide change). This event is fired even if there's no animation (instant change).

moved.diyslider

Fired when the slider ends moving (at the end of a slide change). This event is fired even if there's no animation (instant change).

The two above events pass four parameters to their event handler: the event object, the new slide's DOM element (as a jQuery object), the new slide number, and a boolean set to true if the new slide number is different from the old one (useful to know if the slider actually moved).

resized.diyslider

Fired when the slider is resized (after a call to resize() or updateOptions()).

This event passes two parameters to its event handler: the event object, and an object holding the new slider's dimensions in properties 'h' and 'w'.

Here are the event handlers used on the cats' slider on this page: if you open up your console and play with the slider, you'll see when they're triggered and what data they actually get.

$(".slider").bind("moving.diyslider", function(event, slide, slideNumber, actuallyMoved){
    console.log("↓ "+ event.type);
    console.log(event, slide, slideNumber, actuallyMoved);
});
$(".slider").bind("moved.diyslider", function(event, slide, slideNumber, actuallyMoved){
    console.log("↓ "+ event.type);
    console.log(event, slide, slideNumber, actuallyMoved);
});
$(".slider").bind("resized.diyslider", function(event, dimensions){
    console.log("↓ "+ event.type);
    console.log(event, dimensions);
});

Notes

  • DIYSlider works with jQuery 1.4.4 and above

Download on GitHub