TIL_0608_배너슬라이드

보통 앱의 메인페이지엔 2-3개의 이미지가 슬라이드되며 노출된다.
오늘은 그 기능을 구현했다.

직접 뒤로가기, 앞으로가기 컨트롤하는 버전은 아니고

'재생', '스탑'형태로 컨트롤하는 형태였다.

일단 이미지는 총 3개를 사용하였고 우측으로 한장씩 넘어가는 기능은 캐러쉘, carouselRef를 이용해서 구현하였다.

기본적으로 캐러쉘 자체에 탑재되어있는 기능이 많으니 손쉽게 사용할 수 있다.

보안의 문제로 여러개 옵션은 작성하지 않았지만 대략 이런 옵션들을 통해 구현할 수 있다.

const carouselSettings = {
    autoplay: true,
    slidesToShow: 1,
    rtl: false,
    speed: 000,
    infinite: true,
    ease: 'easeOut',
    beforeChange: (current: number, next: number) => setCurrentIndex(next),
  };

사실 캐러쉘은 이미 알고 있는 기능이였고 오늘 새롭게 구현하면서 slick~~형태로 작성하여 사용할 수 있다
생각 이상으로 간단했다.

- STOP : carouselRef.current?.slickPause()

- PLAY: carouselRef.current?.slickPlay()

• 클릭에 따라 작동하기 위해 state 하나를 추가하여 상태값을 관리하였다.

carouselRef.current?.slickPause();
    play === true ? setPlay(false) : setPlay(true);
    play === true ? carouselRef.current?.slickPause() : carouselRef.current?.slickPlay()

이렇게 작성하니 너무 간단한 기능이라는 생각이 든다^^
나눠져있는 컴포넌트에서 필요한값들을 주고받으며 쓰더라도 이제 좀 익숙해져서 속도가 붙는 것 같아 뿌듯하다
오늘은.. '벌써? 👍🏼'도 받았다