[JS] 타임 슬라이더 구현(자동 스크롤)

버튼 클릭 시, 요소가 좌측/우측으로 배치되어 표출되도록 자동 스크롤 처리 적용

 

 

해당 게시물은 위 예시 이미지 설명에서 언급한 바와 같이, 타임슬라이더를 생성하고 '이전', '다음' 버튼을 통해 슬라이더를 컨트롤 하는 기능을 생성함과 더불어 해당 기능 동작 시, active상태의 요소가 사용자에게 보여지는 부모요소 사이즈 내에 항상 표출될 수 있도록 자동 스크롤 기능을 덧붙이는 코드에 대한 예시에 대한 정리 글이다.

 

 

구현을 위한 코드 예시는 아래와 같다.

See the Pen 자동 스크롤 타임슬라이더(이전/다음) by HamJeong (@HamJeong) on CodePen.

 

위 예시 코드를 직접 동작해보면 알 수 있다 시피, '이전', '다음' 버튼을 활용한 item요소의 컨트롤이 가능하다.

js 코드의 논리 설명이 주석으로 자세하게 달려있기 때문에 추가 설명은 생략하였다.

 

버튼 이벤트 뿐 아니라 time요소에 해당하는 item을 직접 클릭하여 동일한 전반 기능들이 활용될 수 있도록 수정한 예시도 있다.

See the Pen 자동 스크롤 되는 타임슬라이더(요소 직접 클릭) by HamJeong (@HamJeong) on CodePen.

 

prev(), next()함수에서 중복된다고 표현할 수 있는 로직을 updateHighlight(newIndex)로 분리하고, 구분되어야하는 사항을 각 함수 내 분기처리하여 기능을 구현하였다.

두 번째 예시 또한 자세하게 남긴 주석을 통해 충분히 흐름을 이해할 수 있으므로 추가 설명은 생략하였다.