react-lite-carousel

react-lite-carousel is a lightweight and minimalistic carousel component for React, designed to be simple, fast, and easy to integrate into your projects.

Features

• 📦 Lightweight: Minimal dependencies to keep your project size small.
• ⚡ Fast and performant: Optimized for smooth transitions and quick rendering.
• 🎨 Customizable: Simple props to control the behavior of the carousel.

Installation

npm install react-lite-carousel

or using Yarn:

yarn add react-lite-carousel

Examples

Basic Usage

Here's a basic example of how to use the Carousel component directly in your React project:

import { ReactLiteCarousel } from 'react-lite-carousel';

function App() {
  return (
    <ReactLiteCarousel>
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
    </ReactLiteCarousel>
  )
}

With Autoplay

<ReactLiteCarousel autoPlay autoPlayInterval={5000}>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</ReactLiteCarousel>

Custom Styling

<ReactLiteCarousel 
  containerWidth="80%"
  btnBackgroundColor="#000000"
  btnArrowColor="#FFFF00"
  btnRounded={true}
>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</ReactLiteCarousel>

Props

Prop	Type	Default	Description
children	node	required	The slides to be rendered in the carousel.
autoPlay	boolean	false	Whether the carousel should automatically cycle through slides.
autoPlayInterval	number	3000	The interval (in milliseconds) between slide transitions when autoPlay is true.
displayButtons	boolean	true	Whether to display the next and previous navigation buttons.
containerWidth	string | null	null	The width of the carousel container. If null, it defaults to 100%.
btnBackgroundColor	string	'#757575'	The background color of the navigation buttons.
btnArrowColor	string	'#FFFFFF'	The color of the arrow icons in the navigation buttons.
btnRounded	boolean	false	Whether the navigation buttons should have rounded corners.

Development

If you want to contribute and run the project locally, here are the steps to get started:

1. Clone the repository:

git clone https://github.com/Tony-S201/react-lite-carousel.git

cd react-lite-carousel

2. Install dependencies:

npm install

or using Yarn:

yarn install

3. Run the development server:

npm start

4. Build:

npm run build

This will generate the transpiled files in the dist folder.

Bug and issues

If you encounter any issues, feel free to open an issue on GitHub: https://github.com/Tony-S201/react-lite-carousel/issues

Thank you for using React Lite Carousel! 🎉