Versatile Touch-enabled jQuery Carousel Plugin - Redils

Redils is a powerful, touch-friendly, fully configurable jQuery carousel / slider plugin that supports centering, auto-rotating, responsive scaling and much more.

More features:

• Slide or fade transition effects.
• Touch events are supported.
• Works perfectly on responsive web layout.
• Supports any content types.
• Allows multiple slides.
• Keyboard navigation.
• Arrow navigation and bullet pagination.
• Cross browser.
• Lots of configuration options and API.

Basic usage:

1. Put jQuery library together with the jQuery Redils plugin's JavaScript and Stylesheet files into the webpage.

<link rel="stylesheet" href="css/redils.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/redils.js"></script>

2. The basic html structure for the Redils carousel.

<div class="redils-cont redils-default">
  <div class="redils">
    <div class="slide-cont">
      <div id="first-slide" class="slides">
        <img id="first-image-in-slide" src="1.jpg">
      </div><div class="slides">
        <img src="2.jpg" alt="b5b5b5">
      </div><div class="slides">
        <img src="3.jpg">
      </div><div class="slides">
        <img src="4.jpg">
      </div><div class="slides">
        <img src="5.jpg">
      </div>
    </div>
  </div>
  <div class="redils-controls">
    <div class="arrow-area arrow-area-left">
      <div class="arrow"></div>
    </div>
    <div class="arrow-area arrow-area-right">
      <div class="arrow"></div>
    </div>
  </div>
  <div class="pagination"></div>
</div>

3. Call the function redils on the top element as follow.

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

4. That's it. You can freely customize the carousel by passing the following options to the redils() method.

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

  // 'dyn' or integer
  width: 'dyn',

  // 
  position: 0,

  // Show slides around the main slider area. 
  // 0, 1, 2
  overflow: 1,

  // animation speed
  speed: 200,

  // temporary animation speed
  temporarySpeed: 200,

  // center the current slide
  center: false,

  // shows pagination
  // boolean, 'num', 'str', 'line', 'thumb'
  pagination: true,

  // determine whether or not to add a prefix or suffix to the pagination
  // false, 'pre', 'post'
  attach: false,

  // full width 
  fullWidth: false,

  // shows timer
  timerBar: false,

  // autoplay interval
  auto: 4000,

  // allows multiple slides
  multiSlide: false,
  multiSlidePadding: 0,

  // enable auto resize for responsive design
  autoResize: false,

  // sets height based on image sizes
  setHeight: true,

  // integer, float, false
  ratio: false,

  // allows keyboard navigation
  allowKeyboard: false,

  // updates hash when slide changes
  updateHash: false,

  // Stipulate break points for multislider to change number of sub slides in super slide container. 
  // Allows for multiple slides in a super slide container. 
  // This requires multislide for it to work.
  // array, false
  breakPoints: false,

  // Should only be used if the plugin is already being used or if you want to switch between the two. 
  // Collapses the slider so that the slides are lying on top of each other and has a fade transition.
  slide: true,

  // Used in conjunction with the above property slide. 
  // This stacks the slides on either side of the viewport with a specific distance of the next and previous slides showing. 
  // The slide animation is via CSS animations and calc() therefore it is slightly experimental and not well supported.
  stacked: false,

  // draggable
  drag: false,

  // the type of easing used on animations during slide transitions
  easing: false,

  // CSS classes
  slideClass: 'slides',
  multiSlideClass: 'super-slide',
  pagClass: 'pagination',
  slideContClass: 'slide-cont',
  arrowContClass: 'arrow-area',
  rightArrowClass: 'arrow-area-right',
  timerBarContClass: 'redils-timer',
  timerBarFillClass: 'redils-fill',
  singleMultiSlideClass: 'single-multislide-disable',
  previousSlideClass: 'previous',
  currentSlideClass: 'current',
  nextSlideClass: 'next',

  // debug mode
  debug: false
  
});

5. Public methods.

// update the carousel
$('.redils-default .redils').redils('update');

// pause the animation
$('.redils-default .redils').redils('pauseAnimation');

// resume the carousel
$('.redils-default .redils').redils('resumeAnimation');

// move to a specific slide
$('.redils-default .redils').redils('moveTo', {moveTo: 1});

// which slide to skip to
$('.redils-default .redils').redils('skipTo', {skipToSlide: 3, skipToSlideSpeed: 200});

// destroy the plugin
$('.redils-default .redils').redils('destroy');

6. Events.

// Triggers when interacting with the slider. Swipe, click, arrow etc.
$('.redils-default .redils').on('redils.interaction', function(){ });

// Triggers when images in the slider are completely loaded. 
// This triggers before rendered.
$('.redils-default .redils').on('redils.imagesLoaded', function(){ });

// TriggersWhen a multi slider is fully rendered for the first time and after every recalculation.
$('.redils-default .redils').on('redils.rendered', function(){ });

// Triggers When a the slider is rendered and at every update.
$('.redils-default .redils').on('redils.updated', function(){ });

// Triggered before the slider starts animating.
$('.redils-default .redils').on('redils.beforeAnimating', function(){ });

// Triggered after the slider starts animating.
$('.redils-default .redils').on('redils.afterAnimating', function(){ });

Change logs:

2017-05-29

• Added a new form of pagination.

2017-05-18

• When dragging the slider now moves at the same speed as mouse/finger.

2017-05-15

• Bug fixes to ensure multislider doesn't appear on wrong slide on load. 
• Fixed overwriting of data objects.

2017-02-14

• Added a trigger for when slider is first rendered.

2017-01-26

• Added the destroy method to dismantle sliders. Namespaced all internal events.

2016-11-09

• Fixed afterAnimating trigger

2016-11-05

• Much better touch handling and better resolutions when overloading scrolling

2016-11-02

• Added drag capabilities to the slider. Updated touch interactions. Added easing.

2016-10-27

• Added drag capabilities to the slider. Updated touch interactions. Added easing.

2016-10-25

• Added support for modules

 

---

This awesome jQuery plugin is developed by coalescecreate. For more Advanced Usages, please check the demo page or visit the official website.