[RESAT] 6일차 미션 - 캐러셀 만들기 (1)

 

오늘은 RESAT 파밍 챌린지 6일 차다.

지난주까지 클론 코딩, 타이머, 투두 리스트, 캘린더까지 총 4개의 기능을 만들었다.

이번 미션은 [캐러셀 만들기]로 총 3일 동안 순차적으로 이어지는 미션인데

캐러셀을 3단계로 만드는 거라서 그에 맞게 나눠봤다.

 

---

 

미션 내용

- 여러 개의 이미지가 있는 슬라이더 (캐러셀) 구현
- 다양한 크기의 이미지가 넣어도 동일하게 동작을 하도록 구현
- 슬라이드 양 옆에 화살표를 통해 이미지가 움직이도록 구현

 

이번 미션은 딱 캐러셀의 기본 기능만 있는 정도였다.

이 기능을 구현할 때 가장 중심이 되는 부분은 아무래도

[ 버튼을 누르면 이미지가 이동한다]

이게 가장 핵심이 되는 기능이 아닐까 싶다. 

 

여기서 요구하는 조건 외에 나중에 추가하면 좋을 기능을 리스트업 해보면

 

- 자동 이미지 이동
- 가장 마지막 이미지에서 다음 버튼을 눌렀을 때, 자연스럽게 첫 이미지로 이동
- dot 만들기
- dot 클릭 시 해당 순서에 있는 이미지로 이동

 

물론 이 위에 있는 기능들이 차후 미션들에 추가가 될 수 있겠지만 일단 이 정도로 추가 기능이 있지 않을까 생각해 본다.

 

728x90

중점 구현 사항

const handleCarouselBtn = (value) => {
  carouselImgList.style.transform = `translateX(-${
    (currentIdx + value) * defaultWidth
  }px)`;
};

leftBtn.addEventListener("click", () => handleCarouselBtn(-1));

rightBtn.addEventListener("click", () => {
  handleCarouselBtn(1);
});

 

사실 버튼을 누르면서 이미지를 전환하는 것은 그리 어렵지 않은 일이다.

css 스타일 중 transform을 잘 이용하면 구현할 수 있는데

css 스타일로 정해진 구역 외에 벗어나는 구역을 잘 숨겨주고

그걸 스타일 변화를 통해 보여주면 되기에 이번 미션에서는 크게 어려운 부분은 없었다.

 

구현 화면

 

이번에 만든 캐러셀은 이미지 덕분인지 뭔가 이쁜 UI가 나온 것 같다.

드디어 6일 차 만에 제대로 된 애플리케이션을 만든 듯..?ㅎㅎ

 

일단 내가 지금 만든 건 정말 기본 슬라이드 기능만 있는 상태다 ㅎㅎ

이 정도도 나쁘지 않은 것 같다 ㅎㅎㅎ

 

현재 상금 현황

현재 시간 기준 6일 차 과제 제출 기간이 종료됐다.

일차별 제출 인원을 조사해 본 결과 아래와 같이 확인이 되었다.

 

일차	제출 인원 (총 34명)	현재 상금	1인당 상금
1	31	15,000원	약 500원
2	12	110,000원	약 9천원
3	12	110,000원	약 9천원
4	12	110,000원	약 9천원
5	10	120,000원	12,000원
6	10	120,000원	12,000원

 

지금 느낌이지만 왠지 나만 실수하지 않으면 이 인원이 쭉 이어지지 않을까 싶다 ㅋㅋㅋ

12000원이면 꿀이지..ㅎㅎ 열심히 해봐야지!!

 

---

 

배포 링크

▶ [RESAT] 캐러셀 만들기