@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.6.1

• Use ramda es5 imports

1.6.0

• Use content-visibility css property to improve performances

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