Code Playground

< h1 > Code Playground </ h1 >

무한 루프 슬라이드 오늘은 자바스크립트로 구현해 본 무한루프 슬라이드를 정리해보려고 한다. 예전에 제이쿼리를 사용해서 슬라이드를 구현해본 적은 있지만 마지막 슬라이드에서 첫번째 슬라이드로 자연스럽게 옆으로 넘기는 이벤트는 구현하지 못했었다. 이번엔 제이쿼리 사용없이 순수하게 바닐라 자바스크립트로 무한루프 기능과 페이지네이션 기능까지 만들어보려고 한다. 1 2 3 4 5 Prev Next 먼저 HTML코드는 이렇다. div.slide_content 안에는 원하는 img태그를 추가하면 되는데, 이미지 추가하기가 귀찮아서 슬라이드 각각의 배경색만 다르게 하여 만들 생각이다. 페이지네이션은 일단 동적으로 추가할 예정이라서 ul 태그만 만들어두었다. 이제 css를 작성해야 하는 데, 일단 슬라이드가 움직이는 원리..