React Slick으로 Carousel slide 구현하기

carousel slide란?

 : 회전목마(carousel)처럼 요소들의 순환시키는 슬라이드 쇼

---

carousel slide와 slider의 차이는?

 carousel slide

 : 이미지나 텍스트의 슬라이드를 가로로 슬라이드시켜 여러 개를 표시하는 컴포넌트

slider(track bar)

 : 사용자가 점(인디케이터)를 움직임으로써 값을 설정할 수 있는 그래피컬 컨트롤 요소

 

 

(slider로 검색했더니 원하는 기능이 나오지 않아 검색하다 보면 차이점을 알게 되었다!)

---

React에서 구현하기

• react-slick
• fullPage.js
• Swiper
• React Swipeable
• React Responsive Carousel
• etc…

---

직접 구현해보기

• react-slick을 사용해 구현하기
• 조건
  1. 일시 정지 기능
  2. arrow를 활용한 이미지 변경 기능
  3. 자동 플레이 기능
• react-slick의 경우 문서가 class형 컴포넌트로 작성되어 함수형 변환 필요
• slick이 제공하는 arrow가 아닌 따로 arrow 버튼 설정 필요
       => arrow 커스텀 및 기능 구현
• 버튼을 누를 시 자동 실행과 정지 기능 구현 필요
       => state를 이용한 값 변경 필요
           => 함수형 컴포넌트로 변경 필요
• (현 이미지 위치 / 총 이미지 길이) 표시하기

 

---

구현 코드

//SimpleSlider.js

import React, {Component, useCallback, useRef, useState} from "react";
//Slick 컴포넌트 추가
import Slick from "react-slick";

//슬라이드 이미지 리스트
import {sliderList} from "./sliderlist";

//이전, 다음, 정지 및 실행 버튼, 이외 텍스트 style
import {PagingArrow, PagingPause, PagingText, PagingWrapper} from "./styled";

//정지 및 실행 아이콘 불러오기
import {ReactComponent as PauseIcon} from "../../assets/icons/PauseIcon.svg";
import {ReactComponent as PlayIcon} from "../../assets/icons/PlayIcon.svg";

const SimpleSlider = () => {

    const slickRef = useRef(null);
    
    //autoplay 정지 및 실행 상태
    const [isPlay, setIsPlay] = useState(false);
    
    //현 슬라이드 위치 상태
    const [currentSlide, setCurrentSlide] = useState(0);

    //slider 설정(공식 문서 참고)
    const setting = {
        autoplay: true,
        autoplaySpeed: 3000,
        pauseOnHover: true,
    };
    
    //이전 이미지 불러오기 기능
    const previous = useCallback(() => slickRef.current.slickPrev(), []);
    //다음 이미지 불러오기 기능
    const next = useCallback(() => slickRef.current.slickNext(), []);
    //정지한 이미지 자동 플레이 시작 기능
    const play = useCallback(() => slickRef.current.slickPlay(), []);
    //자동 플레이 정지 기능
    const pause = useCallback(() => slickRef.current.slickPause(), []);

    return (
        <div>
            <Slick
                {...setting}
                initialSlide={0}
                afterChange={(slide) => setCurrentSlide(slide)}
                infinite
                arrow={false}
                slidesToshow={1}
                slidesToScroll={1}
            ref={slickRef}>
                {sliderList.map((image) => (
                    <ImgWrapper key={image.id}>
                        <ImgContainer src={image.src} alt={image.alt} />
                    </ImgWrapper>
                ))}

            </Slick>


            <PagingWrapper>
                <PagingArrow onClick={previous}>&lt;</PagingArrow>
                <PagingText> {currentSlide + 1}/{sliderList.length}</PagingText>
                <PagingArrow onClick={next}>&gt;</PagingArrow>
                <PagingPause onClick={()=>setIsPlay(!isPlay)}>
                    {isPlay ? <PlayBtn onClick={play}/> : <PauseIcon onClick={pause}/> }
                </PagingPause>
            </PagingWrapper>

        </div>
    );

}
export default SimpleSlider;

//sliderlist.js
//이미지 리스트

import img2 from "../../assets/img/music.jpg";
import img4 from "../../assets/img/puppy.jpg";
import img6 from "../../assets/img/study.jpg";
import img7 from "../../assets/img/deer.jpg";

export const sliderList = [

    {
        "id": 2,
        "src": img2,
        "alt": "두번째 슬라이드"
    },
    {
        "id": 4,
        "src": img4,
        "alt": "4번째 슬라이드"
    },
    {
        "id": 6,
        "src": img6,
        "alt": "6번째 슬라이드"
    },
    {
        "id": 7,
        "src": img7,
        "alt": "7번째 슬라이드"
    }
];

---

여러 블로그들을 찾아봤는데 class형 컴포넌트를 활용한 것이 주이고

내가 원하는 스타일이 없어서 작성해보았다.

다음에는 라이브러리 없이 carousel slide 구현해보는 글도 작성해보고자 한다!

---

React Slick 문서 참고하기!