✨ Features

• Automagically responsive:
  • Any size: no need to set a specific size via props
  • Multiple items: no need to set the number of items per "page"
• Supports images, videos, everything: each direct child is a slide
• Scroll based: works on mobile or trackpad
• Control buttons
• Custom styling
• Accessible by default
• Show next/previous items partially
• Works with server-side rendering

👀 Demos

View the full Storybook documentation.

• Standard Carousel
• Variable Slides
• With Gap
• With Custom Button Content
• With Custom Aria Labels
• Button Styling

⚙️ How to use

1. Install the dependency

   npm install @codelytv/react-carousel

   or

   yarn @codelytv/react-carousel

2. Import and use:

     import { Carousel } from "@codelytv/react-carousel"

   <Carousel>
     <div>A simple slide</div>
     <div><img src="https://placekitten.com/500/500" alt="a slide can contain anything" /></div>
     <article>
       <h2>It can be any tag</h2>
       <p>and contain any number of items</p>
     </article>
   </Carousel>

   The carousel automatically detects the size of each slide and when navigating via buttons, it will scroll smoothly until the first not visible slide is in view.

🎛️ Props

| Name | Value | Default | Description | | -------------------------------- | ------------------- | --------------------------- | --------------------------- | | prevButtonContent | React.ReactNode | <ArrowLeft /> | The HTML content of the previous navigation button | | nextButtonContent | React.ReactNode | <ArrowRight /> | The HTML content of the next navigation button | | prevAriaLabel | string | "Previous" | Defines the previous navigation button aria-label attribute. Useful when the button content is an element without accessible text. | | nextAriaLabel | string | "Next" | Defines the previous navigation button aria-label attribute. Useful when the button content is an element without accessible text. |

🎨 Styling

There are some CSS Variables that will help you style the carousel:

| Name | Default | Description | | -------------------------------- | ------------------- | --------------------------------------------- | | --slider-gap | 0 | Sets the gap between slides | | --slider-nav-margin-top | 0.5rem | Sets the top margin of the navigation buttons | | --slider-button-width | 2.5rem | Sets the navigation buttons width | | --slider-button-height | 2.5rem | Sets the navigation buttons height | | --slider-button-padding | 0.2rem | Sets the padding of the navigation buttons |

If this is not enough, you can always style via CSS classes. They all have low specificity so they are easy to overwrite, but be careful, changing this elements could cause the carousel to break. Try to limit the changes to colors, background, etc. to prevent unexpected results.

| Class | Description | | --------------------- | -------------------------------------- | | .carousel | The main carousel wrapper | | .carousel__slider | The carousel scroller | | .carousel__slide | The wrapper for each slide | | .carousel__nav | The wrapper for the navigation buttons | | .carousel__button | The navigation buttons |

🤝 Contributing

📚 Run

• npm run build: Compiles the Carousel package
• npm run storybook: Opens Storybook documentation with all of the Carousel demos

✅ Testing

npm run test: Run unit tests with Jest and React Testing Library

🔦 Linting

• npm run lint: Run linter
• npm run lint:fix: Fix lint issues

👌 Codely Code Quality Standards

Publishing this package we are committing ourselves to the following code quality standards:

• 🤝 Respect Semantic Versioning: No breaking changes in patch or minor versions
• 🤏 No surprises in transitive dependencies: Use the bare minimum dependencies needed to meet the purpose
• 🎯 One specific purpose to meet without having to carry a bunch of unnecessary other utilities
• ✅ Tests as documentation and usage examples
• 📖 Well documented ReadMe showing how to install and use
• ⚖️ License favoring Open Source and collaboration