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

or

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/} }]*

API

Each composer function exposes an API:

Main API:

goToNext() Go to next slide

goToPrev() Go to previous slide

goTo(slideIndex) Go to a particular (slideIndex) slide

getActiveSlideIndex() Returns the current slide index.

destroy() Destroys the carousel

Dots API:

getNrOfDots() Returns the nr of total dots

nrOfActiveDot() Returns the index of active dot

goToDot(dotIndex) Go to a particular (dotIndex) dot

dotsList() Returns an element that is a list of dots

AutoSlide API:

stop() Stops the auto slide interval

start() Starts the auto slide interval

Draggable API:

stop() Stops the draggable functionality

start() Starts the draggable functionality

LICENSE

MIT