Back to the Tutorial

The jQuery slider that just slides.

No fancy effects or unnecessary markup, and it’s less than 3kb.

Default usage

Slide 1
Slide 2
Slide 3
Slide 4

$('.default-slider').unslider();

Automatic slider

Slide 1
Slide 2
Slide 3
Slide 4

$('.automatic-slider').unslider({
autoplay: true
});

Vertical slider

Slide 1
Slide 2
Slide 3
Slide 4

$('.vertical-slider').unslider({
animation: 'vertical',
autoplay: true,
infinite: true
});

Automatic fade animation

$('.fading-slider').unslider({
animation: 'fade',
autoplay: true,
arrows: false
});

Totally manual slider

Slide 0 (first)
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5 (last)

$('.manual-slider').unslider({
keys: false,
arrows: false,
nav: false
});
//  Delay is a custom function
$('#manual').on('keyup', function() {
$('.manual-slider').unslider('animate:' + $(this).val());
});

Infinite slider

Slide 0 (first)
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5 (last)

$('.infinite-slider').unslider({
infinite: true
});