Carousel component for multistep screens
Carousel component.
``bash`
npm i -S @chipp972/carousel
Setup the carousel in the redux store to be able to control it with redux actions:
`javascript
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:
`javascript
import React from 'react';
import { Carousel } from '@chipp972/carousel';
import { carouselId } from './constants';
import { StepComponent1, StepComponent2, StepComponent3, StepComponent4 } from './component';
export const Example = () => (
);
`
Here is an example of step:
`javascript
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 (
STEP {currentStepIndex}
);
};
`
| 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 | |
You can use the "raw" version which is just a React wrapper of swipe-js-iso with some additional options.
`typescript
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
return (
<>
id="test-raw"
swipeOptions={{
widthOfSiblingSlidePreview: 400,
continuous: false
}}>
Polyfill
You should use a polyfill to enable smoothscrolling on ios devices.
For example with
:`javascript
import smoothscroll from 'smoothscroll-polyfill';smoothscroll.polyfill();
`Changelog
$3
- Use ramda es5 imports
$3
- Use
css property to improve performances$3
- Remove useless babel config
$3
- Remove smooth scroll polyfill for ios to not break static site build
$3
- Fix emotion appearing in build files
$3
- Add a
dependencyList parameter to re-render the carousel on demand
- fix startSlide` being a required parameter (default is 0)- Export raw carousel to be used without Redux
- Fix siblings preview
- Add polyfill for smooth scrolling on ios devices