# react-modern-slider

> A modern image carousel component built with react that supports boxes with different sizes. Demo: https://shamouni.github.io/shop-react

Latest version **0.1.0** (published 2025-08-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-modern-slider
pnpm add react-modern-slider
yarn add react-modern-slider
bun add react-modern-slider
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2025-08-31 |
| First published | 2023-08-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 143.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Amin Shamouni |
| Maintainers | shamouni |
| Keywords | Slideshow, Image slider, React slideshow, React image carousel |

## Links

- npm: https://www.npmjs.com/package/react-modern-slider
- Repository: https://github.com/shamouni/react-modern-slider
- Homepage: https://github.com/shamouni/react-modern-slider#readme
- Issues: https://github.com/shamouni/react-modern-slider/issues
- npm.io page: https://npm.io/package/react-modern-slider

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^19.1.1
- [react-dom](https://npm.io/package/react-dom.md) ^19.1.1
- [react-indiana-drag-scroll](https://npm.io/package/react-indiana-drag-scroll.md) ^2.2.1

## 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

- 0.1.0 (latest) — 2025-08-31
- 0.0.9 — 2025-08-31
- 0.0.8 — 2025-08-29
- 0.0.7 — 2025-08-29
- 0.0.6 — 2025-08-29
- 0.0.5 — 2023-09-22
- 0.0.4 — 2023-09-22
- 0.0.3 — 2023-08-11
- 0.0.2 — 2023-08-08
- 0.0.0 — 2023-08-08

## README

# React Modern Slider (Boxed image slideshow)

A modern image carousel component built with react that supports boxes with different sizes.
Demo: https://shamouni.github.io/shop-react

![alt text](https://raw.githubusercontent.com/shamouni/shamouni.github.io/master/assets/images/slider-screenshot.jpg)

## Installation

```
 npm install react-modern-slider
```

```js
import { Slider, Slide, HBox, VBox } from "react-modern-slider";
```

You need to import the css style

```js
import "react-modern-slider/dist/style.css";
```

## Examples

```js
import { Slider, Slide, HBox, VBox } from "react-modern-slider";
import "react-modern-slider/dist/style.css";

const App = () => {
  const Dir = "https://shamouni.github.io/shop-react/images/banners";
  const txt =
    "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate, explicabo, laudantium illo eius sed, deleniti earum architecto reprehenderit";

  return (
    <Slider>
      <VBox width="3">
        <Slide
          height="3"
          title="Beautiful landscape"
          src={`${Dir}/s-32.png`}
          lbl="Sport"
          color="red"
          borderRight
          borderBottom
        />

        <Slide
          height="3"
          title="Beautiful landscape"
          src={`${Dir}/s-18.jpeg`}
          lbl="Sport"
          color="green"
          borderRight
          borderTop
          borderBottom
        />

        <Slide
          height="3"
          title="Beautiful landscape"
          src={`${Dir}/i9.jpg`}
          lbl="Sport"
          color="green"
          borderRight
          borderTop
        />
      </VBox>

      <VBox width="5">
        <Slide
          height="7"
          title="Beautiful landscape"
          text={txt}
          src={`${Dir}/big-1.jpg`}
          lbl="Sport"
          color="blue"
          fontSize="large"
          borderLeft
          borderRight
          borderBottom
        />

        <HBox height="3">
          <Slide
            title="Beautiful landscape"
            src={`${Dir}/s-7.jpg`}
            lbl="Sport"
            color="purple"
            borderLeft
            borderRight
            borderTop
          />

          <Slide
            title="Beautiful landscape"
            src={`${Dir}/s-59.png`}
            lbl="Sport"
            color="red"
            borderLeft
            borderRight
            borderTop
          />
        </HBox>
      </VBox>

      <VBox width="3">
        <Slide
          height="3"
          title="Beautiful landscape"
          src={`${Dir}/s-30.jpg`}
          lbl="Sport"
          color="sky"
          borderLeft
          borderRight
          borderBottom
        />

        <Slide
          height="3"
          title="Beautiful landscape"
          src={`${Dir}/s-20.jpeg`}
          lbl="Sport"
          color="green"
          borderLeft
          borderRight
          borderTop
          borderBottom
        />

        <Slide
          height="3"
          title="Beautiful landscape"
          src={`${Dir}/s-9.jpg`}
          lbl="Sport"
          color="sky"
          borderLeft
          borderRight
          borderTop
        />
      </VBox>

      <VBox width="4">
        <Slide
          height="5"
          title="Beautiful landscape"
          src={`${Dir}/s-13.jpeg`}
          lbl="Sport"
          color="blue"
          borderLeft
          borderRight
          borderBottom
        />

        <Slide
          height="5"
          title="Beautiful landscape"
          src={`${Dir}/a-71.png`}
          lbl="Sport"
          color="red"
          borderLeft
          borderRight
          borderTop
        />
      </VBox>

      <VBox width="6">
        <HBox height="3">
          <Slide
            title="Beautiful landscape77777777"
            src={`${Dir}/s-26.jpg`}
            lbl="Sport"
            color="purple"
            borderLeft
            borderRight
            borderBottom
          />

          <Slide
            title="Beautiful landscape"
            src={`${Dir}/s-46.jpg`}
            lbl="Sport"
            color="red"
            borderLeft
            borderRight
            borderBottom
          />
        </HBox>

        <Slide
          height="7"
          title="Beautiful landscape"
          text={txt}
          src={`${Dir}/big-3.jpg`}
          lbl="Sport"
          color="blue"
          fontSize="large"
          borderLeft
          borderRight
          borderTop
        />
      </VBox>

      <VBox width="4">
        <Slide
          height="5"
          title="Beautiful landscape"
          src={`${Dir}/s-45.jpg`}
          lbl="Sport"
          color="green"
          borderLeft
          borderRight
          borderBottom
        />

        <Slide
          height="5"
          title="Beautiful landscape"
          src={`${Dir}/s-2.jpg`}
          lbl="Sport"
          color="sky"
          borderLeft
          borderRight
          borderTop
        />
      </VBox>

      <VBox width="4">
        <Slide
          height="5"
          title="Beautiful landscape"
          src={`${Dir}/s-64.jpg`}
          lbl="Sport"
          color="pink"
          borderLeft
          borderBottom
        />

        <Slide
          height="5"
          title="Beautiful landscape"
          src={`${Dir}/s-60.jpg`}
          lbl="Sport"
          color="red"
          borderLeft
          borderTop
        />
      </VBox>
    </Slider>
  );
};

export default App;
```

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