# [React] Carousel with React-Slick

React Carousel Library

* react-slick
    
* swiper.js
    
* react-slideshow
    

### Installation and Setup

* To install React Slick library in the React application
    

```javascript
// NPM
npm install react-slick slick-carousel 
```

### Import the React-Slick library

```javascript
import Slider from 'react-slick'
```

Import the React-Slick CSS Styles

```javascript
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
```

### Example

CarouselImages.tsx

```javascript
// Carousel에 쓰이는 이미지
// title과 description은 더미 데이터임
const CarouselImages = [
  {
    id: 1,
    src: `${process.env.PUBLIC_URL}/images/Carousel/Img1.png`,
    alt: 'Image 1',
    title: 'Lamborghini Huracan Performante',
    description:
      'The Huracán Performante has reworked the concept of super sports cars and taken the notion of performance to levels never seen before.',
  },
  {
    id: 2,
    src: `${process.env.PUBLIC_URL}/images/Carousel/Img2.png`,
    alt: 'Image 2 ',
    title: 'Porsche 911 Turbo S',
    description:
      'This Turbo S variant comes with an engine putting out 641 bhp @ 6750 rpm and 800 Nm @ 2500 rpm of max power and max torque respectively.',
  },
  {
    id: 3,
    src: `${process.env.PUBLIC_URL}/images/Carousel/Img3.png`,
    alt: 'Image 3',
    title: 'Ford Mustang',
    description: 'For offroad lovers. Super fast, Super Comfortable.',
  },
  {
    id: 4,
    src: `${process.env.PUBLIC_URL}/images/Carousel/Img4.png`,
    alt: 'Image 4',
    title: 'Lamborghini Aventador SV',
    description:
      'Aventador SV provide thrills unlike anything that has ever been experienced before.',
  },
];

export default CarouselImages;
```

Carousel.tsx

```javascript
import Slider from 'react-slick';
import React from 'react';
import CarouselImages from '../assets/CarouselImages';
import styled from 'styled-components';

// css 스타일 추가
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

// 기본 css 파일
<>
  <link
    rel="stylesheet"
    type="text/css"
    charSet="UTF-8"
    href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
  />
  <link
    rel="stylesheet"
    type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
  />
</>;

const Carousel = () => {
  const settings = {
    dots: true, // 캐러셀의 점을 보여줄지
    infinite: true, // 마지막 장에서 첫 장으로
    speed: 500, // 넘어가는 속도
    slidesToShow: 1, // 한 화면에 보이는 콘텐츠 개수
    slidesToScroll: 1, // 한번에 넘어가는 콘텐츠 수
    autoplay: true,
  };
  return (
    <StyledContainer>
      <Slider {...settings}>
        {CarouselImages.map((item) => (
          <div key={item.id}>
            <Image src={item.src} alt={item.alt} className="img" />
            {/* <h2 className="title">{item.title}</h2>
          <p className="description">{item.description}</p> */}
          </div>
        ))}
      </Slider>
    </StyledContainer>
  );
};

const StyledContainer = styled.div`
  margin: 0 auto 30px;
  // width: 80%;
  // height: 20%;
`;

const Image = styled.img`
  width: 100%;
  // max-height: 10%;
`;
export default Carousel;
```

* styled-components
    
      
    

---

cf. [https://blog.openreplay.com/creating-a-simple-carousel-with-react-slick/](https://blog.openreplay.com/creating-a-simple-carousel-with-react-slick/)

cf. [https://velog.io/@cookncoding/React-slick%EC%97%90-styled-components-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0](https://velog.io/@cookncoding/React-slick%EC%97%90-styled-components-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0) - styled-components

cf. [https://krpeppermint100.medium.com/js-react-hooks%EB%A1%9C-carousel-slider-%EB%A7%8C%EB%93%A4%EA%B8%B0-2e558151bbee](https://krpeppermint100.medium.com/js-react-hooks%EB%A1%9C-carousel-slider-%EB%A7%8C%EB%93%A4%EA%B8%B0-2e558151bbee) - 바닐라 자바스크립트로 캐로셀 만들기