JavaScript 화살표 텍스트 슬라이더

이제 화살표가 있는 텍스트 슬라이더를 만들어 봅시다. 이는 텍스트가 타이머에 따라 변경되는 것이 아니라 화살표를 클릭하여 변경된다는 의미입니다. HTML 코드에 화살표를 추가해 보겠습니다:

<a href="" id="left">←</a>
<a href="" id="right">→</a>
<div id="slider"></div>

이 슬라이더 구현의 주요 핵심은 텍스트용 카운터 변수가 양쪽 화살표의 클릭 핸들러에 공통으로 사용되어야 한다는 점입니다:

let i = 0; // 외부 변수

left.addEventListener('click', function() {
	// i를 1 감소시키고
	// i번째 텍스트를 출력합니다
});
right.addEventListener('click', function() {
	// i를 1 증가시키고
	// i번째 텍스트를 출력합니다
});

두 번째 핵심은 i를 감소시킬 때나 증가시킬 때 모두 0보다 작거나 배열의 마지막 요소보다 큰 숫자로 벗어나지 않도록 해야 한다는 점입니다.

설명된 슬라이더를 구현해 보세요. 텍스트가 순환하도록 만들어 보세요.

이전 문제를 수정하여 텍스트가 순환하지 않고 가장 오른쪽 또는 가장 왼쪽 위치에 도달하면 더 이상 스크롤되지 않도록 만들어 보세요.