react-carousel

carousel in React

Demo

default.mp4

Installation

npm install @eden-kim/react-carousel

Usage

import React from 'react';
import styled from 'styled-components';

import Carousel from '@eden-kim/react-carousel';

const showingSlideCardNum = 5;
const itemGap = '36px';
const buttonSizeOnBothSide = '25px';
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

const CarouselSample = () => {
  return (
    <StyledContainer>
      <Carousel showingSlideCardNum={showingSlideCardNum} itemGap={itemGap} buttonSizeOnBothSide={buttonSizeOnBothSide}>
        {items.map((item) => (
          <StyledItem key={`content-${item}`}>{item}</StyledItem>
        ))}
      </Carousel>
    </StyledContainer>
  );
};

const StyledContainer = styled.div`
  margin-top: 50px;
`;

const StyledItem = styled.div`
  background: #f7ebfa;
  text-align: center;
  font-size: 2rem;
  line-height: 140px;
  height: 150px;
  border-radius: 8px;
`;

export default CarouselSample;

Props

Name	Type	Description
showingSlideCardNum	number	Number of Items which is showing
itemGap	string	Gap length between items
buttonSizeOnBothSide	string	Button size on both sides