About Slider.js

What is Slider.js?

99% of all sliders have the same functionality. And yet, as a web developer, how many times did you have to rewrite the same functions for every custom slider that had to be just a little bit different?

This is where Slider.js comes in. It’s a powerful JavaScript framework that enables you to build sliders, fast. It gives you a rock-solid foundation to build all kinds of sliders - standard, custom, complex, simple. If it’s a slider, Slider.js can do it.

Slider.js will do all of the dirty work for you, like:

Did I mention it will even slice up the slides in a grid for you?

The 1% left for you to write is only the transition effects. It can be as simple as a fadeIn(), or you can go as nuts as you like. It’s up to you. The next section demonstrates everything that I’ve said so far. Have a look at the slider and then look at the code.

Showtime!

Slider.js Demo

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney

Slider.js Demo

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney

Slider.js Demo

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney

Slider.js Demo

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney

Slider.js Demo

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney

Slider.js Demo

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney

Here is the entire JavaScript code that is required for a slider like this one:

var slider5 = sliderjs_init_slider();
slider5.sliderjs_event('view_init', slider5_view_init);
slider5.sliderjs_event('transition_in', slider5_transition_in);

slider5.init({ interval : 2000, transition_length : 800 });

function slider5_view_init() {
    this.z_move_to_top(this.current_slide_index);
}
function slider5_transition_in() {
    this.z_move_to_top(this.current_slide_index);
    this.current_slide.css({ "left" : -470 }).animate({ "left" : 0 }, { duration : 800, easing : 'easeOutQuart' });
    this.inner_content_box.css({ "left" : -500 }).animate({ "left" : 10 }, { duration : 800, easing : 'easeOutQuart' });
}

That amount of code for a slider like the one above. Not bad! There are more examples of what you can do with Slider.js in the Demo page. Additionally, in the Tutorials page there are four videos, in which I code every slider from the demo page. Check them out!