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}); });
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 });