Logos-carousel-react NPM

logos-carousel-react

A fully responsive and customizable React carousel, ideal for showcasing logos, images, or other visual content. Features:

Smooth infinite scrolling.
Fully customizable via props.
Lightweight and easy to integrate.

Installation

Install the package using npm:

npm i logos-carousel-react

Prerequisites:

Ensure you are using React 16+ and React-DOM 16+.

Basic Usage

Import and use the LogosCarousel and CarouselItem components to build a carousel.

Example

import React from "react";
import { LogosCarousel, CarouselItem } from "logos-carousel-react";

const App = () => {
  return (
    <LogosCarousel>
      <CarouselItem src="logo1.png" alt="Logo 1" title="Logo 1" />
      <CarouselItem src="logo2.png" alt="Logo 2" title="Logo 2" />
      <CarouselItem src="logo3.png" alt="Logo 3" title="Logo 3" />
    </LogosCarousel>
  );
};

export default App;

Props for `LogosCarousel`

Prop	Type	Default	Description
`background`	`string`	`transparent`	Carousel background color. Accepts values like `#FFF`, `rgba(0,0,0,0.5)`, etc.
`width`	`number`	`100`	Carousel width as a percentage (`25`, `50`, `75`, or `100`).
`imgSize`	`number`	`12.5`	Image height in `rem`.
`spacing`	`number`	`3`	Spacing between images in `rem`.
`speed`	`number`	N/A	Scrolling speed of the carousel. Possible values: `1`, `2`, `3`, `4`, `5`.

Example with Props

<LogosCarousel background="#333" width={75} imgSize={10} spacing={2} speed={3}>
  <CarouselItem src="logo.png" alt="Example Logo" />
</LogosCarousel>

Props for `CarouselItem`

Prop	Type	Default	Description
`src`	`string`	N/A	The URL or path of the logo image.
`alt`	`string`	N/A	Alt text for the image.
`title`	`string`	N/A	Title displayed when hovering over the image.

Custom Styling

The package includes a CSS file (logosCarousel.css) that provides the base styles for the carousel. You can override these styles in your project or extend them as needed.

Main Classes

carousel-container: The main container of the carousel.
carousel__logos: The inner container for scrolling images.
carousel__img: The class for individual logo images.

Notes

If the number of items in the carousel is less than four, the component automatically duplicates the items to maintain smooth scrolling.
The speed prop adjusts internal classes to control animation timing.
Ensure your images are properly formatted and optimized for better performance.