swipeable infinite responsive React carousel
npm install @rybr/react-swipeable-infinite-carouselSimple swipeable, draggable, and scrollable React carousel component.
A demo of the carousel can be seen here
Supports infinite scrolling and slides of varying widths.
``
npm install @rybr/react-swipeable-infinite-carousel
yarn add @rybr/react-swipeable-infinite-carousel
`
`jsx
import { Carousel, Arrows, Indexes } from '@rybr/react-swipeable-infinite-carousel'
//OPTIONAL - can create custom scroll arrows
const CustomArrow = ({
isLeft, //boolean to indicate if this is the right or left arrow
isHidden, //should the arrow be hidden? (true during scrollings, dragging, and when there is nothing to scroll)
scrollBy //function which takes a number input and will scroll by that amount
}) => {
const onClick = useCallback((scrollCount) => (e) => {
e.preventDefault()
e.stopPropagation()
scrollBy(scrollCount)
}, [scrollBy])
return (
style={{
opacity: isHidden ? 0 : 0.5
}}
onClick={onClick(isLeft ? -1 : 1)}
>
)
}
//OPTIONAL - can create custom tile index footer
const CustomIndexes = ({
activeIndexes, //Array of numbers specifying which indexes are active
startIndex, //index of the left-most displayed item
endIndex, //index of the right-most displayed item
slideAnchors, //information about each slide (start and end scroll offsets and slide width)
scrollBy, //function which takes a number input and will scroll by that amount
]}) => {
const onClick = useCallback(
(scrollCount) => (e) => {
scrollBy(scrollCount)
},
[scrollBy],
)
return (
>
{slideAnchors?.map((_, i) => (
className={customIndex ${activeIndexes.includes(i) ? 'isActive' : ''}}
onClick={onClick(i - startIndex)}
/>
))}
//NOTE: all props are optional. These are all set as examples
startIndex={4} //which index to start on
isScrollable={true} //whether scrolling using a mouse or trackpad is allowed
isDraggable={true} //whether dragging by mouse or touch is allowed
hasDragMomentum={true} //whether scroll momentum is added when dragging
dragMomentumSpeed={25} //maximum momentum scroll speed in pixels
dragMomentumDecay={0.98} //scroll momentum decay rate
gridGap={15} //gap between each tile in px
displayCount={4} //maximum number of tiles to display
minDisplayCount={2} //minimum number of tiles to display
arrowLeftProps={{ onClick: customOnClick }} //props to be sent to the left arrow
arrowRightProps={{ onClick: customOnClick }} //props to be sent to the right arrow
arrows={Arrows | CustomArrow} //use built-in Arrows or custom scroll arrows
scrollSpeed={75} //maximum scroll speed in pixels
style={ backgroundColor: 'red' } //container inline style overrides
slideContainerStyle={ border: '1px solid blue' } //slides container inline style overrides
slideStyle={ opacity: 0.5 } //slide container inline style overrides
indexes={Indexes | CustomIndexes} //use built-in Indexes or custom indexes
indexesPerRow={2} //how many indexes to show per row. Each index will be (container width) / indexesPerRow
indexContainerProps={{ style: { background: blue }}} //props to be sent to the scroll index container
indexProps={{ className: 'customClassName' }} //props to be sent to the scroll indexes
shouldScrollByDisplayCount={true} //if true then scroll arrows will scroll by the displayed tile count else will scroll 1 tile at a time
scrollCount={3} //number of tiles to scroll per scroll arrow click. "shouldScrollByDisplayCount" overrides this value
customIndexes={CustomIndexes} //custom scroll indexes
>
{randomColors.map((color, i) => (
| | Type | Default Value | Description |
|--- |--- |--- |--- |
| isInfinite | boolean | false | Toggles whether the infinite scrolling is enabled |
| startIndex | int | 0 | Which index to start on |
| isScrollable | boolean | true | Is the carousel scrollable (mouse wheel + trackpad) |
| isDraggable | boolean | true | Is the carousel draggable (mouse drag + touch screens) |
| hasDragMomentum | boolean | true | Toggles whether there is momentum when dragging (mimics scroll momentum for touch events) |
| dragMomentumSpeed | number | 25 | Maximum speed in pixels that the drag momentum can be |
| dragMomentumDecay | number | 0.98 | The rate of decay of the drag momentum (mulplicative with itself). Each frame, the drag momentum speed will be 98% of what it was last frame. |
| displayCount | int | 0 | How many slides you wish to display.
If no value or 0 is set then the carousel will take up maximum width.
Overflow will be hidden.
Carousel
CSS property will be equal to the smallest value needed in order to display the desired slide count. |
| minDisplayCount | int | 0 | Minimum number of slides to display.
If no value or 0 is set then no minimum width will be applied.
Overflow is not hidden.
Carousel min-width CSS property will be equal to the smallest value needed in order to display the desired slide count. |
| gridGap | number | 10 | The gap between tiles in CSS pixels |
| style | React.CSSProperties | {} | Inline style used to overwrite the default Carousel container CSS |
| slideContainerStyle | React.CSSProperties | {} | Inline style used to overwrite the default that wraps the slides (children) |
| slideStyle | React.CSSProperties | {} | Inline style used to overwrite the default