# react-images-carousel

> Responsive, Lite & Mobile first React Images Carousel

Latest version **2.1.1** (published 2021-06-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-images-carousel
pnpm add react-images-carousel
yarn add react-images-carousel
bun add react-images-carousel
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2021-06-01 |
| First published | 2021-05-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 13.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ArpitMittal.in |
| Maintainers | appymittal |
| Keywords | React-image-slider, Slider, React-images-carousel, Images, ImageCarousel, ReactSlideshow, ImageSlider, Slideshow, react, carousel, React image slider, React images carousel, react-component, react-carousel, react-slideshow, react-gallery, react carousel, react slideshow, react gallery, image gallery, image slider, gallery, image-gallery, swipe |

## Links

- npm: https://www.npmjs.com/package/react-images-carousel
- Repository: https://www.npmjs.com/package/react-images-carousel
- Homepage: https://github.com/arpitmittaldev/react-images-carousel#readme
- Issues: https://github.com/arpitmittaldev/react-images-carousel/issues
- npm.io page: https://npm.io/package/react-images-carousel

## Dependencies (4)

- [web-vitals](https://npm.io/package/web-vitals.md) ^1.0.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 2.1.1 (latest) — 2021-06-01
- 2.1.0 — 2021-06-01
- 2.0.1 — 2021-05-31
- 2.0.0 — 2021-05-31
- 1.0.9 — 2021-05-30
- 1.0.8 — 2021-05-30
- 1.0.7 — 2021-05-30
- 1.0.6 — 2021-05-30
- 1.0.5 — 2021-05-30
- 1.0.4 — 2021-05-30
- 1.0.3 — 2021-05-30
- 1.0.2 — 2021-05-30
- 1.0.1 — 2021-05-30
- 1.0.0 — 2021-05-30

## README

# react-images-carousel

Responsive, lightweight and mobile-first images carousel component for all React apps.

### Specifications

-   Responsive
-   Mobile first
-   Liteweight
-   Pagination dots
-   Slide Transition
-   Infinite loop
-   Works best with the same size images

### Installing as a package

`npm install react-images-carousel`

### Usage

```javascript
import React from 'react';
import ReactImagesCarousel from 'react-images-carousel';

export default function Home() {

    const sliderData = [
        "https://images.unsplash.com/photo-1608447714925-599deeb5a682?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=360&ixlib=rb-1.2.1&q=80&w=750", 
        "https://images.unsplash.com/photo-1504610926078-a1611febcad3?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=360&ixlib=rb-1.2.1&q=80&w=750", 
        "https://images.unsplash.com/photo-1419225692236-28f3211d7038?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=360&ixlib=rb-1.2.1&q=80&w=750",
        "https://images.unsplash.com/photo-1515446870326-c532f9a8d954?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=360&ixlib=rb-1.2.1&q=80&w=750", 
        "https://images.unsplash.com/photo-1545091741-2231068f3478?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=360&ixlib=rb-1.2.1&q=80&w=750",    
    ];

    return (<div>
        <ReactImagesCarousel images={sliderData} sliderBg="#000000" paginationBg="#000000"/>
    </div>
    )
}


```

### Props

| Name                                     | Value                        | Description                                                                                                                                                                                                           |
| ---------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| images                                     | `array` | Images array for showing in the carousel |
| sliderBg                                | `string`                    | Background color of the carousel, defaults to '#000000'|
| paginationBg                                | `string`                    | Background color of the navigaton bar, defaults to '#000000'|

### Credits

Demo Image credits to Unsplash.

```

```

---
_Source: https://npm.io/package/react-images-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._