Next.js( react-slick )

react-slick을 사용하여 배경화면 자연스럽게 슬라이드 하는 형태의 메인 페이지

npm i react-slick

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const ImageSlider = () => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };

  return (
    <Slider {...settings}>
      <div>
        <img src="https://via.placeholder.com/800x400" alt="image1" />
      </div>
      <div>
        <img src="https://via.placeholder.com/800x400" alt="image2" />
      </div>
      <div>
        <img src="https://via.placeholder.com/800x400" alt="image3" />
      </div>
    </Slider>
  );
};

export default ImageSlider;