Next.js - Slider 로 슬라이드 구현

 

Next.js 타입스크립트환경에서 Slider 컴포넌트를 만드는 과정을 기록해보려합니다.

 

1. npm 설치

npm i react-slick slick-carousel

 

2. ImageSlider 컴포넌트생성

"use client";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import { useState } from "react";
import Slider from "react-slick";
import Image from "next/image";
import { FaCircle, FaRegCircle } from "react-icons/fa";

interface ImageSliderProps {
    images: string[];
}

const ImageSlider = ({ images }: ImageSliderProps) => {
    const [currentSlide, setCurrentSlide] = useState(0);

    const settings = {
        dots: false,
        infinite: true,
        speed: 500,
        autoplay: true, 
        autoplaySpeed: 1300,
        slidesToShow: 1,
        slidesToScroll: 1,
        afterChange: (current: number) => setCurrentSlide(current),
    };

    return (
        <div className="w-full max-w-[800px] mx-auto" >
            <Slider {...settings}>
                {images.map((image, index) => (
                    <div key={index}>
                        <div className="relative w-full h-[500px]">
                            <Image 
                                src={image} 
                                alt={`slide-${index}`} 
                                layout="fill"
                                objectFit="cover"
                                priority
                            />
                        </div>
                    </div>
                ))}
            </Slider>
            <div className="flex w-full justify-center">
                {images.map((_, index) => (
                    index === currentSlide ? 
                    <FaCircle key={index} style={{ margin: "0 5px" }} /> : 
                    <FaRegCircle key={index} style={{ margin: "0 5px" }} />
                ))}
            </div>
        </div>
    );
};

export default ImageSlider;

 

 

2-1 옵션설명

 const settings = {
        dots: false,
        infinite: true,
        speed: 500,
        autoplay: true, 
        autoplaySpeed: 1300,
        slidesToShow: 1,
        slidesToScroll: 1,
        afterChange: (current: number) => setCurrentSlide(current),
    };

 

 - dots : 슬라이더 하단에 현재 슬라이드 위치를 표시하는 dot 표시여부이지만 위 컴포넌트에서는 icon으로 대체하기 위해 false로 표시했습니다.

- infinite: 슬라이더가 마지막 슬라이드에 도달한 후 첫 슬라이드로 무한 반복되도록 설정하는 옵션입니다.

- speed: 슬라이드 전환 속도를 500 밀리초로 설정한다는 뜻입니다. 슬라이드가 한번 이동하는데 걸리는 시간입니다.

- autoplay: 슬라이더가 자동으로 슬라이드를 전환하도록 설정하는 옵션입니다. 자동으로 옆으로 넘어가면서 슬라이드가 움직이게하는 옵셥입니다.

- autoplaySpped: 자동 전환되는 간격을 1300 밀리초(1.3초)로 설정합니다. 슬라이드가 자동으로 다음 슬라이드로 이동하기 전 대기시간이고 슬라이드가 다음슬라이드로 넘어가는 시간은 speed 옵션만큼 걸립니다. 해당 옵션은 몇초 뒤에 움직이게 할지를 설정하는 옵션입니다.

- slidesToShow: 한번에 몇개의 슬라이드를 표시되도록할지 설정하는 옵션입니다.

- slidesToScroll: 한번에 몇개의 슬라이드씩 스크롤되도록 설정할지 정하는 옵션입니다.

- afterChange: 슬라이드 전환 후 호출되는 콜백함수입니다. 여기서는 Icon을 변경하기 위해 설정했습니다.

 

2-2 Image 

<Image 
    	src={image} 
        alt={`slide-${index}`} 
        layout="fill"
        objectFit="cover"
        priority
/>

 

- images: 해당 배열은 src 에 들어갈 이미지 링크들을 넣어둔 문자열 배열입니다.

- layout: layout=fill 옵션은 부모 요소를 완전히 채우도록 이미지를 설정합니다. 부모 요소는 반드시 상대적 또는 절대적 위치를 가져아합니다.

- objectFit: cover 이미지가 부모 요소를 덮도록 크기를 조정합니다. 이미지가 잘리더라도 왜곡되지 않고 비율을 유지합니다.