@chipp972/carousel

Carousel component for multistep screens

Usage no npm install needed!

<script type="module">
  import chipp972Carousel from 'https://cdn.skypack.dev/@chipp972/carousel';
</script>

README

@chipp972/carousel

Carousel component.

Install

npm i -S @chipp972/carousel

Usage

Setup the carousel in the redux store to be able to control it with redux actions:

import { combineReducers } from 'redux';
import { carouselReducerKey, carouselReducer } from '@chipp972/carousel';
import { otherReducers } from './reducers';

export const rootReducer = combineReducers({
  [carouselReducerKey]: carouselReducer,
  ...otherReducers
});

Use the component in your app by wrapping all the steps you need to display in the carousel:

import React from 'react';
import { Carousel } from '@chipp972/carousel';
import { carouselId } from './constants';
import { StepComponent1, StepComponent2, StepComponent3, StepComponent4 } from './component';

export const Example = () => (
  <Carousel carouselId={carouselId} isScrollToTop isSwipeDisabled>
    <StepComponent1 />
    <StepComponent2 />
    <StepComponent3 />
    <StepComponent4 />
  </Carousel>
);

Here is an example of step:

import React from 'react';
import { carouselId } from '../constants';
import { useCarousel } from '@chipp972/carousel';

export const StepComponent1: React.FC = () => {
  const { currentStepIndex, goPrevStep, goNextStep } = useCarousel(carouselId);
  return (
    <section>
      <div>STEP {currentStepIndex}</div>
      <button onClick={goPrevStep}>go previous step</button>
      <button onClick={goNextStep}>go next step</button>
    </section>
  );
};

Props

name type description optional default
carouselId string Unique identifier for the carousel in the redux store false
startSlide number Index position Swipe should start at true 0
transitionSpeed number Speed of prev and next transitions in milliseconds true 300 ms
isSwipeDisabled boolean Stop any touches on this container from scrolling the page true false
isContinuous boolean Create an infinite feel with no endpoints true false
isScrollToTop boolean Scroll to the top of the carousel on slide change true false
autoSliding number Begin with auto slideshow (time in milliseconds between slides) true 0
widthOfSiblingSlidePreview number Width of next and previous slide preview in pixels true 0
onTransitionStart (index: number, currentStep: HTMLElement) => void Runs at slide change true
onTransitionEnd (index: number, currentStep: HTMLElement) => void Runs at the end slide transition true
onSwipe (position: number) => void invoked while swiping with the percentage (0-1) of the full width that has been swiped true

Usage without Redux

You can use the "raw" version which is just a React wrapper of swipe-js-iso with some additional options.

import React from 'react';
import { RawCarousel, SwipeInstance } from '@chipp972/carousel';

const slideStyle = {
  height: '100vh',
  color: 'white',
  textAlign: 'center',
  fontSize: 50
};

export const Example = () => {
  // You will need a ref to trigger the carousel actions
  const ref = React.useRef<SwipeInstance>(null);

  return (
    <>
      <button onClick={() => ref.current?.slide(0)}>jump to first</button>
      <button onClick={() => ref.current?.prev()}>prev</button>
      <button onClick={() => ref.current?.next()}>next</button>
      <button onClick={() => ref.current?.slide(ref.current?.getNumSlides() - 1)}>jump to last</button>

      <RawCarousel
        ref={ref}
        id="test-raw"
        swipeOptions={{
          widthOfSiblingSlidePreview: 400,
          continuous: false
        }}>
        <div style={{ backgroundColor: 'red', ...slideStyle }}>1</div>
        <div style={{ backgroundColor: 'blue', ...slideStyle }}>2</div>
        <div style={{ backgroundColor: 'green', ...slideStyle }}>3</div>
      </RawCarousel>
    </>
  );
};

Polyfill

You should use a polyfill to enable smoothscrolling on ios devices. For example with smoothscroll-polyfill :

import smoothscroll from 'smoothscroll-polyfill';

smoothscroll.polyfill();

Changelog

1.5.3

  • Remove useless babel config

1.5.2

  • Remove smooth scroll polyfill for ios to not break static site build

1.5.1

  • Fix emotion appearing in build files

1.5.0

  • Add a dependencyList parameter to re-render the carousel on demand
  • fix startSlide being a required parameter (default is 0)

1.4.0

  • Export raw carousel to be used without Redux

1.3.1

  • Fix siblings preview

1.3.0

  • Add polyfill for smooth scrolling on ios devices