@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