# @jjunyjjuny/react-carousel

> carousel wrapper component for react

Latest version **1.1.2** (published 2021-05-03) · 0 weekly downloads

## Install

```sh
npm install @jjunyjjuny/react-carousel
pnpm add @jjunyjjuny/react-carousel
yarn add @jjunyjjuny/react-carousel
bun add @jjunyjjuny/react-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 | 1.1.2 |
| Published | 2021-05-03 |
| First published | 2021-04-22 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 19.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Maintainers | jjunyjjuny |
| Keywords | react, carousel, slider |

## Links

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

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [react-icons](https://npm.io/package/react-icons.md) ^4.2.0
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [styled-components](https://npm.io/package/styled-components.md) ^5.2.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2021-05-03
- 1.1.1 — 2021-05-01
- 1.1.0 — 2021-05-01
- 1.0.11 — 2021-04-30
- 1.0.10 — 2021-04-30
- 1.0.9 — 2021-04-30
- 1.0.8 — 2021-04-29
- 1.0.7 — 2021-04-29
- 1.0.6 — 2021-04-29
- 1.0.5 — 2021-04-29
- 1.0.4 — 2021-04-29
- 1.0.3 — 2021-04-29
- 1.0.2 — 2021-04-28
- 1.0.1 — 2021-04-27
- 1.0.0 — 2021-04-27
- … 7 more at https://npm.io/package/@jjunyjjuny/react-carousel/versions

## README

## Notice!

- I am practicing npm publish right now. There may be an error, so be careful when using it....

- I plan to add function loop or not, autoplay, dot or number counter ...

- Thank you for your attention!!

<br/>

# 🎠 react-carousel

this library make list into carousel in React

<br/>

## 🔲Sample 

![carousel2](https://user-images.githubusercontent.com/41738385/116840924-912d8380-ac12-11eb-9445-bdc678faa781.gif)

![carousel3](https://user-images.githubusercontent.com/41738385/116840940-a0143600-ac12-11eb-9d1f-866fe68476fd.gif)


<br/>

## 🚀 Installation

Using npm :

```
$ npm i @jjunyjjuny/react-carousel
```

<br/>

## Usage with styled-components

<br/>

### default

```
import styled from "styled-components";
import Carousel from "@jjunyjjuny/react-carousel";

const Container = styled.div`
  margin: 0 auto;
  margin-top: 100px;
  width: 480px;
`;
const Item = styled.div`
  background: #dbe4ff;
  text-align: center;
  font-size: 2rem;
  line-height: 145px;
  height: 150px;
  border-radius: 10px;
`;

const sampleArray = [1, 2, 3, 4, 6, 7, 8];
const CarouselSample = () => {
  return (
    <Container>
      <h2 style={{ textAlign: "center" }}>Sample Carousel</h2>
      <Carousel itemCountPerPanel={3}>
        {sampleArray.map((el) => (
          <Item>{el}</Item>
        ))}
      </Carousel>
    </Container>
  );
};

export default CarouselSample;
```

<br/>

### customMode

```
import styled from "styled-components";
import Carousel, { Controller } from "@jjunyjjuny/react-carousel";

const Container = styled.div`
  margin: 0 auto;
  margin-top: 100px;
  width: 480px;
`;
const Item = styled.div`
  background: #dbe4ff;
  text-align: center;
  font-size: 2rem;
  line-height: 145px;
  height: 150px;
  border-radius: 10px;
`;
const ControllerBox = styled.div`
  display: flex;
  justify-content: center;
  margin-top: 20px;
`;
const sampleArray = [1, 2, 3, 4, 6, 7, 8];
const CarouselSample = () => {
  return (
    <Container>
      <h2 style={{ textAlign: "center" }}>Sample customMode</h2>
      <Carousel itemCountPerPanel={3} customMode carouselId={"jjunyjjuny"}>
        {sampleArray.map((el) => (
          <Item>{el}</Item>
        ))}
      </Carousel>
      <ControllerBox>
        <Controller prev carouselId={"jjunyjjuny"} />
        <Controller next carouselId={"jjunyjjuny"} />
      </ControllerBox>
    </Container>
  );
};

export default CarouselSample;
```

<br/>

## 📃 props

<br/>

### Carousel

|       Name        |     Value      |                                                Description                                                 |
| :---------------: | :------------: | :--------------------------------------------------------------------------------------------------------: |
| itemCountPerPanel |     number     |                                Number of items to show at a timer per piece                                |
|        gap        |     string     |                                          Gap length between items                                          |
|    customMode     |    boolean     | Custom mode can be activated with this prop. In custom mode, the carousel and controller can be separated. |
|    carouselId     | primitive type |                     The only value that corresponds to the controller in custom mode.                      |

<br/>

### Controller

|    Name    |     Value      |                          Description                           |
| :--------: | :------------: | :------------------------------------------------------------: |
| carouselId | primitive type | The ID value of the carousel to which the controller will move |
| prev, next |    boolean     |      Direction in which the controller moves the carousel      |
|  children  | Component, jsx |       if you want your own button, insert it as children       |

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