인터넷에서 얻어낸 캐러셀 만드는 법은 한번에 한 이미지씩 넘어가도록 구현하는 방법만 있는거같길래 그 내용들을 참고해서 넷플릭스의 캐러셀처럼 여러 컨텐츠를 한번에 넘기도록 구현했다.
import "./CarouselTesT.css";
import { useEffect, useRef, useState } from "react";
function CarouselTesT() {
const container_Carousel = useRef();
const [nowX, setNowX] = useState(0);
useEffect(() => {
container_Carousel.current.style.transform = `translateX(${nowX}vw)`;
}, [nowX]);
// useState 말고 useEffect를 이용해야할듯.
const clickLeftButton = () => {
// setNowX(nowX + 20);
setNowX((prop) => prop + 20);
console.log(`it's work ${nowX}`);
};
const clickRightButton = () => {
setNowX(nowX - 20);
console.log(`it's work ${nowX}`);
};
return (
<div className="body" style={{ overflow: "hidden" }}>
<div>{nowX}</div>
<label className="left" onClick={clickLeftButton}>
left
</label>
<label className="right" onClick={clickRightButton}>
right
</label>
<div className="container_Carousel" ref={container_Carousel}>
<div className="inner">
<img src={"img/img1.jpg"} alt="" />
</div>
<div className="inner">
<img src={"img/img2.jpg"} alt="" />
</div>
<div className="inner">
<img src={"img/img1.jpg"} alt="" />
</div>
<div className="inner">
<img src={"img/img2.jpg"} alt="" />
</div>
<div className="inner">
<img src={"img/img1.jpg"} alt="" />
</div>
<div className="inner">
<img src={"img/img2.jpg"} alt="" />
</div>
<div className="inner">
<img src={"img/img1.jpg"} alt="" />
</div>
<div className="inner">
<img src={"img/img2.jpg"} alt="" />
</div>
<div className="inner">
<img src={"img/img1.jpg"} alt="" />
</div>
<div className="inner">
<img src={"img/img2.jpg"} alt="" />
</div>
</div>
</div>
);
}
export default CarouselTesT;
.container_Carousel{
width: 300vw;
transition: transform 0.5s;
}
.inner img{
width: 10%;
float: left;
}
.left{
position: absolute;
z-index: 10;
top: 30%;
transform: translateY(-50%);
padding: 10px;
cursor: pointer;
color: white;
font-weight: 900;
;
}
.right{
position: absolute;
z-index: 10;
top: 30%;
right: 10px;
transform: translateY(-50%);
padding: 10px;
cursor: pointer;
color: white;
font-weight: 900;
}
useState를 이용해서 버튼 누를때마다 10씩 더하거나 빼도록 하였고,
useRef를 이용해서 스타일을 넣을 태그를 선택했다.
그리고 useEffect를 이용해서 nowX값이 변할때마다 style을 바꾸도록 만들었다.
뼈대 html과 css는
https://www.youtube.com/watch?v=qHzSQrLjxlQ&t=293s (코딩애플)
https://www.youtube.com/watch?v=JryRu5zby3A (코남) 를 참고했다.
맨처음엔 useState와 버튼에 클릭되는 함수만을 이용해서 변하도록 하려했지만,
한번클릭할때 작동되지않고 그 다음번 클릭때 이전 변동값이 적용되어서 골머리를 앓았다.
useState는 비동기방식이라 리렌더링 되기전까지는 적용되지않는다고해서, useState로 적용된 값을 즉각적으로 useEffect로 받고, 변동이 감지되면 이 훅에서 즉각적으로 style에 수정되도록 하였다.
아무 이미지 3장만 준비하고 위의 코드를 그대로 복붙하면 쉽게 캐러셀을 구현할 수 있다. 이를 응용해서 넷플릭스 클론코딩에도 적용해봤다.