@rybr/react-swipeable-infinite-carousel v3.2.0

react-swipeable-infinite-carousel

Simple swipeable, draggable, and scrollable React carousel component. A demo of the carousel can be seen here

Supports infinite scrolling and slides of varying widths.

How to install:

npm install @rybr/react-swipeable-infinite-carousel

yarn add @rybr/react-swipeable-infinite-carousel

Working on:

• handle mouse wheel scroll correctly
• auto-scroll feature
• further optimizations
• scroll arrows scroll by displayed tile count for infinite carousel

How to use

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 (
    <button
      className={'customArrowCss'}
      style={{
        opacity: isHidden ? 0 : 0.5
      }}
      onClick={onClick(isLeft ? -1 : 1)}
    >
      <span className={isLeft ? 'leftArrowIcon' : 'rightArrowIcon'} />
    </button>
  )
}

//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 (
    <div
      className={'customIndexes'}
    >
      {slideAnchors?.map((_, i) => (
        <button
          key={i}
          className={`customIndex ${activeIndexes.includes(i) ? 'isActive' : ''}`}
          onClick={onClick(i - startIndex)}
        />
      ))}
    </div>
  )
}

//NOTE: all props are optional. These are all set as examples
<Carousel
  isInfinite={true} //whether the carousel is infinite scrolling or not
  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) => (
    <div key={i} style={tileCss}>
      {i + 1}
    </div>
  ))}
</Carousel>