[React] react-slick을 이용한 slider 구현 및 커스텀

1. react-slick 설치

npm install react-slick

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

react-slick 라이브러리를 설치한 후, 사용하고자 하는 파일 내에 import 해준다.

2. settings 설정

const settings = {
	dots: true,
	infinite: true,
	arrows: false,
	speed: 500,
	slidesToShow: 1,
	slidesToScroll: 1,
	autoplay: true,
	autoplaySpeed: 3000,
};

settings 설정을 통해 원하는대로 슬라이더를 커스텀 해주면 된다.

• dots : 슬라이더 아래에 슬라이드 갯수를 표시하는 점
• infinite : 슬라이더 회전 여부
  (마지막 슬라이드가 끝나면 다시 처음 슬라이드로 되돌아오도록)
• arrows : 양 옆 화살표 표시 여부
• speed : 슬라이드 넘어가는 속도
• slidesToShow : 한 번에 보여주는 슬라이드 개수
• slidesToScroll : 한 번에 넘어가는 슬라이드 개수
• autoplay : 자동으로 슬라이드 되도록

이 외에도 적용 해보았던 기능들은 아래와 같다.

• fade : 서서히 슬라이드 이동
• vertical : 수직으로 이동
• draggable : 드래그로 슬라이드 넘어가도록

3. slider 구현

<Slider {...settings}>
	<div className="banner_container">
		<img src="/main/banner1.png" alt="main banner" />
	</div>
	<div className="banner_container">
		<img src="/main/banner2.png" alt="main banner" />
	</div>
	<div className="banner_container">
		<img src="/main/banner3.png" alt="main banner" />
	</div>
	<div className="banner_container">
		<img src="/main/banner4.png" alt="main banner" />
	</div>
	<div className="banner_cotainer">
		<img src="/main/banner5.png" alt="main banner" />
	</div>
</Slider>

Slider에 {...settings}를 통해 설정들을 적용 시켜주고, Slider 태그 아래에 div 태그를 활용하여 하나의 슬라이드를 구현한다.
5개의 콘텐츠를 보여주기 위해 총 5개의 div를 두고, 그 아래에 img 태그를 사용하여 각 슬라이드 마다 다른 이미지를 보여주도록 했다.

4. 기능 및 스타일 적용

단순히 이미지만 보여주는 것이 아닌, 해당 슬라이드를 클릭 했을 때 그에 맞는 페이지로 이동 시키려고 한다.

라우터 기능을 사용하기 위해 useNavigate를 import 시켜준다.

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();

해당 슬라이드를 클릭 했을 때의 함수를 만들어주고

const onClickBan1 = () => {
	navigate("/");
}

const onClickBan2 = () => {
	navigate("/menu/summary");
}

div 태그와 연결 시켜준다.

<div className="banner_container" onClick={onClickBan1}>
	<img src="/main/banner1.png" alt="main banner" />
</div>
<div className="banner_container" onClick={onClickBan2}>
	<img src="/main/banner2.png" alt="main banner" />
</div>

만약 이미지 크기와 배너의 크기가 맞지 않아 이미지가 원하는대로 보이지 않는 경우,
img 태그에 object-fit 속성을 적용하여 원하는대로 이미지를 맞춰주면 된다.

---

현재 진행 중인 프로젝트에서는 여기까지만 구현해도 되어서 조금 아쉬웠다.
다음에는 더 다양하게 커스텀 해보고 싶다.

포스팅 하면서 느끼는 거지만
이렇게 구현 해놓은 것을 정리할 때는 생각보다 간단한데
막상 처음 구현할 때는 왜 그렇게 애를 먹었는지 모르겠다.

(혹시라도 제가 잘못 알고 있는 부분이 있다면 언제든지 피드백 부탁 드립니다 🤍)