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

🎠 react-carousel

this library make list into carousel in React

🔲Sample

🚀 Installation

Using npm :

$ npm i @jjunyjjuny/react-carousel

Usage with styled-components

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;

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;

📃 props

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

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 |