Versatile Touch-enabled jQuery Carousel Plugin - Redils
File Size: | 387 KB |
---|---|
Views Total: | 2446 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.