[리액트] Carousel (이미지 자동 슬라이드) 기능 구현하기

 

1. 먼저 react-slick과 slick-carousel을 터미널에 깔아주기

npm install react-slick
npm install slick-carousel

 

2. 작성하는 파일에 아래 두개 임포트 해주기

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

 

 

3. 이건 내가 이번 프로젝트를 만들면서 기본 프레임을 짜놓은 코드이다 :) 

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import React, { Component } from "react";
import Slider from "react-slick";
import styled from "styled-components";
import carouselImg1 from "../../../sampleimg/img1.png";
import carouselImg2 from "../../../sampleimg/img2.png";
import carouselImg3 from "../../../sampleimg/img3.png";

export default class SimpleSlider extends Component {
  render() {
    return (
      <div>
        <h2> 캐러셀 Section </h2>
        <Slider {...settings}>
          <CarouselBox>
            <CarouselImg src={carouselImg1} />
            <CarouselTitle>1</CarouselTitle>
            <CarouselContent>1번 본문</CarouselContent>
          </CarouselBox>
          <CarouselBox>
            <CarouselImg src={carouselImg2} />
            <CarouselTitle>2</CarouselTitle>
            <CarouselContent>2번 본문</CarouselContent>
          </CarouselBox>
          <CarouselBox>
            <CarouselImg src={carouselImg3} />
            <CarouselTitle>3</CarouselTitle>
            <CarouselContent>3번 본문</CarouselContent>
          </CarouselBox>
        </Slider>
      </div>
    );
  }
}

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  autoplay: true,
  autoplaySpeed: 2000,
  slidesToShow: 1,
  slidesToScroll: 1,
  centerPadding: "0px",
  centerMode: true,
};

const CarouselBox = styled.div`
  border: 2px solid black;
`;

const CarouselImg = styled.img`
  width: 100%;
  height: 300px;
`;

const CarouselTitle = styled.h3`
  font-size: 25px;
  text-align: center;
`;

const CarouselContent = styled.h3`
  font-size: 16px;
  text-align: center;
`;