jQuery Redils Plugin Demos

A slider that covers all functionality.

Default

Standard slider.

$('.redils-default .redils').redils();

Centered

Slider with slides centered in screen. Shows a little of the coming and previous slides.

$('.redils-centered .redils').redils({
	center: true,
	auto: false,
	overflow: 0,
	pagintion: 'line'
});

Centered with Overflow

Slider with slides centered in screen. Shows a little of the coming and previous slides.

$('.redils-centered-overflow .redils').redils({
	center: true,
	auto: false,
	overflow: 2
});

Stacked

Slides are stacked to the left and right. Animation is done by translate3d with the help of calc. Experimental...

$('.redils-stacked .redils').redils({
	slide: false,
	stacked: true,
	auto: false
});

Responsive

Slider Stretches to fit it's container. With external controls

$('.redils-responsive .redils').redils({
	autoResize: true
});

//External controls for responsive redils
$('#arrow-left').on('click', function(){
	$('.redils-responsive .redils').redils('moveTo', {moveTo: -1});
});

$('#arrow-right').on('click', function(){
	$('.redils-responsive .redils').redils('moveTo', {moveTo: 1});
});

$('#return-to-start').on('click', function(){
	var pos = $(this).data('pos');
	$('.redils-responsive .redils').redils('skipTo', {skipToSlide: pos});
});

Arrow Left

Return Home

Arrow Right

Responsive

Same as section above but with only one slide. Should be disabled but have all values.

$('.redils-responsive .redils').redils({
	autoResize: true
});

Fader

Slider off use fade transitions instead. Updates the page's hash automatically based on data-hash or default 'slide-#' where # is the index + 1.

$('.redils-fader .redils').redils({
	autoResize: true,
	slide: false,
	auto: false,
	speed: 800,
	updateHash: true
});

Multislide

Using several fixed size slides within a slider. Slider changes amount of slides shown based on container's width.

$('.redils-multislide .redils').redils({
	multiSlide: true,
	multiSlidePadding: 10,
	auto: false
});

Multislide

Test for not many slides setting class on arrows

$('.redils-multislide .redils').redils({
	multiSlide: true,
	multiSlidePadding: 10,
	auto: false
});

Multislide Contact Sheet

Responsive, stretching images reconfigure on user defined breakpoints. Levrages multislide with defined breakpoints.

$('.redils-contact-sheet .redils').redils({
	multiSlide: true,
	breakPoints: [{breakAfter: 1100, numSlides: 9}, {breakAfter: 600, numSlides: 4}, {breakAfter: 0, numSlides: 1}],
	auto: false
});

Responsive

Using only CSS to manipulate height

$('.redils-responsive-height .redils').redils({
	autoResize: true,
	setHeight: false
});

jQuery Redils Plugin Demos

Default

Centered

Centered with Overflow

Stacked

Responsive

Responsive

Fader

Multislide

Multislide

Multislide Contact Sheet

Responsive

Caption associated with slide