Vanilla JavaScript Slider 자바스크립트 무한 슬라이드 구현
1. 분석 이전 슬라이드 드래그 구현 포스팅에 이어서 무한 슬라이드 기능을 구현하려 한다. 외부 라이브러리를 사용하지 않고 순수 자바스크립트만을 이용해 무한 슬라이드를 구현한다. 무한 슬라이드를 구현하기 위해선 처음과 마지막 슬라이드에서 이전, 이후로 이동했을 때 자연스럽게 슬라이드가 진행돼야 한다. 예를 들자면 1, 2, 3, 4, 5 슬라이드가 존재할 때 5번에서 다음 버튼을 눌렀을 때 1번 슬라이드를 보여주는 것이다. 따라서 시각적으로 자연스럽게 무한 슬라이드를 구현하기 위해 처음과 마지막 슬라이드를 각각 복제 해서 슬라이드를 보여줄 것이다. 먼저 엘리먼트를 복제한다. 복제하는 단계에서 엘리먼트 태그, 클래스, 앨리먼트 안의 내용을 모두 복사해준다. // 무한 슬라이드를 위해 start, end 슬..
2022. 5. 21.
