Composable-carousel NPM

Composable carousel ·

Composable carousel is a javascript library for building your own carousel with no dependencies.

Composable: The library provides a set of composable functions which offer the possibility to create a carousel of your needs without unnecessary dependencies and unused code.
Customisable: Create your own composable functions and compose them together with the provided composable functions.

Quick start

Installation

npm install composable-carousel

yarn add composable-carousel

Example

HTML

<div id="selector">
  <div>slide 1</div>
  <div>slide 2</div>
  <div>slide 3</div>
  <div>slide 4</div>
</div>

Javascript

The `createCarousel` accepts an option object and compose the carousel for you:

import createCarousel from 'composable-carousel';

const carousel = createCarousel({
    carouselEl: document.getElementById('selector'),
    onInit() {},
    onChange() {},
    onResize() {},
    options: {
        visibleSlides: 1,
        slidesToScroll: 1,
        activeSlideIndex: 0,
        transitionTime: 200,
        transitionEasing: 'ease-out',
        isAutoSlide: true,
        autoSlideTime: 2000,
        isDraggable: true,
        responsiveOptions: [{
            breakpoint: breakpoints.upToMedium,
            options: {
                isDraggable: true,
                visibleSlides: 1.5,
            },
        },
        {
            breakpoint: breakpoints.upToLarge,
            options: {
                isDraggable: true,
                visibleSlides: 2.5,
            },
        },
        {
            breakpoint: Infinity,
            options: {
                isDraggable: false,
                visibleSlides: 3,
            }
        }],
    },
})

The following example imports the composable functions that are needed and compose the carousel using these functions:

import composeCarousel from 'composable-carousel';
import finiteSliderFrame form 'composable-carousel/finiteSliderFrame';
import finiteTransition frorm 'composable-carousel/finiteTransition'
import autoSlide form 'composable-carousel/autoSlide';
import draggable form 'composable-carousel/draggable';
import dots form 'composable-carousel/dots';

const selector = document.getElementById('#selector');
const carousel = composeCarousel(document.getElementById('#selector'), {
    onInit() {},
    onChange() {},
})(
    finiteSliderFrame({visibleSlides: 1, slidesToScroll: 1 }),
    finiteTransition({ transitionTime: 200 }),
    autoSlide({ autoSlideTime: 2000 }),
    draggable(),
    dots(),
    responsive([{
        breakpoint: breakpoints.Infinity,
        options: {
            isDraggable: false,
        }
    },
    {
        breakpoint: breakpoints.upToMedium,
        options: {
            isDraggable: true,
        }
    }])
);

Composable functions:

finiteSliderFrame infiniteSliderFrame options: { visibleSlides: number, slidesToScroll: number, activeSlideIndex: number }
finiteTransition infiniteTransition options: { transitionTime: number, transitionEasing: string }
draggable options: {}
dots options: {}
responsive Options: [{ breakpoint: number, options: {*/Override any options from above/} }]*