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.