Flywheel: A react carousel.

example.js

export default MyCarousel = ({ myItems }) => (
  <Flywheel>
    {
      ({
        activeItemIndex,
        getNextButtonProps,
        getPrevButtonProps,
      }) => (
        <div>
          <button
            {...getPrevButtonProps({
              onClick: () => console.log('prev clicked'),
            })}
          >
            Prev
          </button>

          {myItems.map({ id, imageURL }, index) => (
            <FlywheelItem key={id}>
              {
                ({
                  getItemProps,
                }) => (
                  <div
                    {...getItemProps({
                      key: id,
                      style: {
                        borderTop: `1px solid ${index === activeItemIndex ? 'red'
                        : 'transparent'},
                      },
                      onClick: () => console.log(`${id} clicked`)
                    })}
                  >
                    <img src={imageURL} />
                  </div>
                )
              }
            </FlywheelItem>
          )}

          <button
            {...getNextButtonProps({
              onClick: () => console.log('next clicked'),
            })}
          >
            Next
          </button>
        </div>
      )
    }
  </Flywheel>
);