캐러셀 슬라이드 2탄!
https://www.youtube.com/@mavidesign
오늘은 외쿡인 선생님의 강의를 봤음
[Mavi Design]이라는 채널인데 영어인데도 설명을 쉽게 해주는것 같다 바로 구독 박았다
영어 공부랑 피그마 공부를 한번에 하기 개꿀
처음에는 잘 안됐는데 2트만에 성공했당
근데 똑같이 따라했는데 왜 안되는건지는 잘 모르겠음.. 다시 뜯어보면서 알아봐야겠다

캐러셀 슬라이드 강의 중에 제일 좋았다
size컴포넌트와 photo컴포넌트를 만들어서
나중에 쉽게 조절할 수 있었음
여기서 size컴포넌트가 잘 못 만들었는지 small에서 이미지를 바꾸면
레이아웃은 안바뀌고 사이즈가 big으로 바꼈다
몇 번 다시 시도했는데 안돼서 처음부터 다시 도전 ~.~
(에셋에서 가져와야하는데 복사해서 가져와서 그런듯..?)

1. 먼저 사이즈를 잡고 photo컴포넌트를 하나 만든다
2. 복사해서 size container를 만든다
Property이름을 size로 바꾸고 big, small 두가지 버전을 만든다


3. Photo컴포넌트에서 변경할 이미지들을 만든다.
4. 순서에 맞게 1~5 프레임 만들어주고
프로토타입 앞,뒤로 연결

프로토타입 연결할 때 주의할점
* 이미지 선택 -> 프레임 선택 / Trigger는 on drag

back도 가능하다 하하
(앞에 버벅이는건 렉인듯,,?)
앞뒤로 자연스러운 슬라이드
깔끔하게 완성
컴포넌트의 이해가 아직 부족해서
따라하는것 밖에 못했다.. 다음엔 컴포넌트 공부해야지


'스킬업 챌리지' 카테고리의 다른 글
| #10_영차영차<스킬업 챌린지> (0) | 2024.07.09 |
|---|---|
| #9_컴포넌트 기초 다지기<스킬업 챌린지> (0) | 2024.07.08 |
| #7_캐러셀 슬라이드라 쓰고 개꿀팁 발견이라 읽는다<스킬업 챌린지> (0) | 2024.07.04 |
| #6_hover 인터렉션 만들기<스킬업 챌린지> (0) | 2024.07.03 |
| #5_무작정따라5탄<스킬업 챌린지> (0) | 2024.07.02 |