README.md

@graficos/g-slim-carousel

Installation

npm i @graficos/g-slim-carousel
# or using yarn
yarn add @graficos/g-slim-carousel

Usage

import { Carousel } from '@graficos/g-slim-carousel';

export const MyApp = () => (
  <Carousel>
    <img src='some/path/to/img.webp' />
    <img src='some/path/to/img.webp' />
    <img src='some/path/to/img.webp' />
  </Carousel>
);

Options

See https://g-slim-carousel-storybook.netlify.app for all the possible options available

Resources:

With a little help from my friends:

• React Library Boilerplate: https://github.com/sixfootsixdesigns/React-Library-Boilerplate
• (A11Y) WCAG section on Carousel Concepts: https://www.w3.org/WAI/tutorials/carousels/
• Styling React Components in Sass: https://hugogiraudel.com/2015/06/18/styling-react-components-in-sass/
• Framer Motion: https://www.framer.com/api/motion/
• Slider in Framer Motion from the docs:
• https://www.framer.com/api/motion/animate-presence/
• https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?file=/src/Example.tsx:1616-1650
• Images API: https://source.unsplash.com/