npm package: @somedaycode/react-carousel
Description: react-carousel for your projects.
Latest version: 0.1.6

# @somedaycode/react-carousel

react-carousel for your projects.

easy to **customize**, **simple** but also **powerful**.

## Installation

```
npm install @somedaycode/react-carousel
```

---

## Example

![example](https://user-images.githubusercontent.com/71962505/116859183-88e93e80-ac3a-11eb-84c7-3632476da04d.gif)

### code written as example

```jsx
import React from 'react';
import Carousel from '@somedaycode/react-carousel';
import styled from 'styled-components';

const App = () => {
  const options = {
    carouselWidth: 800,
    itemsToShow: 4,
    duration: 0.5,
    timing: 'ease-in-out',
    arrowSize: 20,
  };

  const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14].map((card) => (
    <Item>{card}</Item>
  ));

  return (
    <Main>
      <Carousel {...options}>{items}</Carousel>
    </Main>
  );
};

const Main = styled.main`
  display: flex;
  justify-content: center;
`;

// width: 190px = 200px - margin(5px + 5px)
const Item = styled.div`
  margin: 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  background: linear-gradient(to right, #ffafbd, #ffc3a0);
  border-radius: 10px;
  width: 190px; // 200px - margin(5px + 5px)
  height: 200px;
`;

export default App;
```

---

## props

| **Name**        |                          **Description**                           |                                                                                                            **value** |
| --------------- | :----------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------: |
| `carouselWidth` |                     Carousel total width (px)                      |                                                                                      `null` or `Number` without 'px' |
| `itemsToShow`   |           A number of Items you want to show in Carousel           |                                                                                                             `Number` |
| `duration`      | The length of time a transition animation should take to complete. |                                                                                                             `Number` |
| `timing`        |                     Transition-timing-function                     | `String`: 'ease', 'ease-out' etc. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) |
| `arrowSize`     |                          Arrow size (px)                           |                                                                                                             `Number` |

## How to customize your Carousel or Arrow?

You can simply customize your carousel or arrow with **css**

First, create a css file (ex. carouselStyle.css)

```css
/*
 * carouselStyle.css
 * Each component has own className
*/
.carousel {
  /* here you write css  */
}

.carousel-right-arrow {
  /* here you write css  */
}

.carousel-left-arrow {
  /* here you write  css  */
}

main {
  display: flex;
  justify-content: center;
}

div {
  margin: 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  background: linear-gradient(to right, #ffafbd, #ffc3a0);
  border-radius: 10px;
  width: 190px; /* 200px - margin(5px + 5px) */
  height: 200px;
}
```

then, Import css file to your Carousel

### without using styled-components

```js
import './carouselStyle.css';
import Carousel from '@somedaycode/react-carousel';

const App = () => {
  const options = {
    // options
  };

  const items = [1, 2, 3, 4].map((card) => <div>{card}</div>);

  return (
    <main>
      <Carousel {...options}>{items}</Carousel>
    </main>
  );
};
```

Please let me know if you get any issues while using `@somedaycode/react-carousel`.

email: somedaycode@gmail.com

github: https://github.com/somedaycode/somedaycode-react-carousel