웹
이미지 슬라이더 만들기 (React, scss)
만들고자 하는 것 쇼핑몰 이벤트 구역에서 배너를 돌아가게 하는 이미지 슬라이더를 만들 것이다. 소스코드 이미지를 div로 감싼 후에 해당 div의 className에서 현재 인덱스를 가지고 있는 current 상태값과 비교를 통해 클래스명을 컨트롤 해준다. 모든 이미지의 opacity: 0; 으로 설정하여 현재 이미지의 순서가 아니면 이미지가 보이지 않도록 설정한다. 그리고 인덱스가 같을 경우 current에 대한 css를 opacity: 1; 을 넣어줌으로써 해당 이미지가 보일 수 있도록 해준다. const [current, setCurrent] = useState(0) // 이미지 배열의 현재 인덱스, 특정 초마다 변경됨 const sliderLength = sliderData.length // 전체..
2024. 1. 17. 22:51