react-lite-carousel v1.3.3

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

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! 🎉