RS Carousel

Customizable basic fullpage carousel

Features

• Easy extensible
• Written in ES6
• Progressive background image loading with blur (like medium.com)

Example

ES6 basic - demo

ES6 horizontal - demo

ES6 custom controls - demo

Or see example dir

Installation

npm install rs-carousel

Dependencies

jQuery and Velocityjs

Usage

import { RSBaseCarousel } from 'rs-carousel';
 
const $container = $('.js-carousel');
const carousel = new RSBaseCarousel($container, opts);

Lazy loading background images

Use attributes for urls of images

<div class="m-carousel__slide js-rs-carousel__slide">
    <div class="js-rs-carousel__slide__bg" data-image-small="img_small.jpg" data-image="img_large.jpg"></div>
    ...
</div>

Options

Option	Type	Default	Description
slideSel	string	'.js-rs-carousel__slide'	Carousel elements selector
slideBgSel	string	'.js-rs-carousel__slide__bg'	Slide background selector
slideBgCanvasClass	string	'bg-canvas'	Class for slide background canvas (used for blur small background image)
slideBgImgClass	string	'bg-img'	Class for slide background element (used for full background image)
slideBgImgStyles	object	{ backgroundPosition: 'center center', backgroundSize: 'cover' }	Css for background element
slideBgImgLoadingClass	string	'bg-img-loading'	Class form slide background element while loading full image
slideBgImgLoadedClass	string	'bg-img-loaded'	Class for slide background element when loaded full image
slideBgImgFadeDuration	number	500	Duration of animation backgrounds
blurRadius	number	30	Used for blur small background image
slideZIndex	number	1000	Carousel elements z-index
swipeThreshold	number	30	Minimal distance required before slides change
duration	number	1000	Animation duration
direction	number	24	Carousel direction (see constants)
easing	string	'easeInOutCubic'	Animation easing (see velocityjs easings)
infinite	boolean	true	Infinite looping

Constants

import { constants } from 'rs-carousel';
 
console.log(constants);

{
    directions: {
        left: 2,
        right: 4,
        up: 8,
        down: 16,
        vertical: 24,
        horizontal: 6
    },
    animationsNames: {
        in: {
            "2": "carouselSlideLeftIn",
            "4": "carouselSlideRightIn",
            "8": "carouselSlideUpIn",
            "16": "carouselSlideDownIn"
        },
        out: {
            "2": "carouselSlideLeftOut",
            "4": "carouselSlideRightOut",
            "8": "carouselSlideUpOut",
            "16": "carouselSlideDownOut"
        }
    }
}

Api

Methods and props

Methods and props are called on carousel instances

const carousel = new RSBaseCarousel($container, opts);
 
carousel.goTo(2); // Method
carousel.currentSlide; // Prop

Method	Argument	Description
goTo	index : number	Goes to slide by index
next		Goes to next slide
prev		Goes to next slide
addBeforeCb	fn : function	Add before slide change callback
addAfterCb	fn : function	Add after slide change callback
lock		Lock carousel
unlock		Unlock carousel

Prop	Description
currentSlide	Current slide
nextIndex	Next slide index
prevIndex	Prev slide index
$container	Constainer of carousel instance
settings	Carousel settings of current instance

Build (for developers)

npm run build

License

Released under the MIT License. See the bundled LICENSE file for details.