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

 

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

어제부터 해서 캐러셀을 만드는 미션이었는데, 어제는 정말 캐러셀 기능에서 딱 필요한 기능이었고

오늘은 기본 캐러셀에서 추가 기능들이 적용된 미션이다.

 

---

 

미션 내용

- 이미지가 2초 간격으로 자동 슬라이드 되는 기능 구현
- 슬라이드 끝 부분에서 슬라이드 이미지가 첫 번째 이미지로 순환

 

이번 미션에는 어제 추가 기능으로 구현하려 했던 자동 슬라이드의 기능을 구현하라고 되어있었다.

예상했으면 미리 해둘걸 싶으면서...

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

 

- dot 만들기
- dot 클릭 시 해당 순서에 있는 이미지로 이동

 

이번에는 예상하고 미리 한번 만들어 봐야겠다..!

 

728x90

 

중점 구현 사항

const autoSlide = () => {
  auto = setInterval(() => {
    handleCarouselBtn(1);
  }, 2000);
};

const autoRightSlide = (idx) => {
  if (idx === textList.length) {
    carouselImgList.style.transition = "none";
    carouselImgList.style.transform = `translateX(0px)`;

    setTimeout(() => {
      carouselImgList.style.transform = `translateX(-${defaultWidth}px)`;
      carouselImgList.style.transition = `all 0.3s ease-in-out`;
    }, 10);

    currentIdx = 1;
  }
};

const autoLeftSlide = (idx) => {
  if (idx === 0) {
    carouselImgList.style.transition = "none";
    carouselImgList.style.transform = `translateX(-${
      defaultWidth * (textList.length - 1)
    }px)`;

    setTimeout(() => {
      carouselImgList.style.transform = `translateX(-${
        defaultWidth * (textList.length - 2)
      }px)`;
      carouselImgList.style.transition = `all 0.3s ease-in-out`;
    }, 10);

    currentIdx = 4;
  }
};

autoSlide();

이번에는 자동으로 슬라이드가 되는 기능을 구현해야 해서 setInterval 메서드를 사용했다.

여기서 자동으로 넘어가는 것도 중요한데 가장 중요한 건 마지막 페이지에 도착했을 때가 문제다.

 

제일 마지막에 도착한 뒤 다음 페이지로 넘어갈 때 가장 첫 번째로 넘어가야 하는데

이 과정에서 애니메이션이 뚝 끊기게 보이게 되는 상황이 발생할 수 있어서

짧은 사이에 스타일을 변경하는 방식으로 구현해서 시각적으로 자연스럽도록 구현했다.

 

구현 화면

자동 슬라이드는 커서가 나오지 않았을 때 보이는 화면이고,

마지막 슬라이드로 이동했을 때 자연스럽게 처음 이미지가 나오는 것이 커서가 나왔을 때다.

나름 자연스럽게 넘어가서 꽤 만족스러운 부분이라고 생각이 된다

 

현재 상금 현황

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

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

 

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

 

어제 예상대로 이대로 쭉 갈 거 같다는 느낌이었는데 역시는 역시였다.

아마 이대로 종료되지 않을까 싶긴 한데..

 

---

 

배포 링크

▶ [RESAT] 캐러셀 만들기