@jjunyjjuny/react-carousel

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