기본 소스는 w3school의 HOW TO 항목에서 slide show 입니다.
https://www.w3schools.com/howto/howto_js_slideshow.asp
기본 예제중에 자동재생, 페이저, 이전·다음페이지 버튼, 재생 멈춤 버튼을 모두 제공하는 예제는 없기에 포스팅 작성하기로 함. (구글에 검색해봐도 딱히 국내에 없길래..ㅠ..)
언제나 그렇듯 어설프지만 기본 틀만 참고해주세욤
HTML
CSS
JS (바닐라 자바스크립트)
그간은 jQuery로 setInterval을 이용하여 하였는데, 그렇게 하면 해본 분들은 알겠지만 특히 반응형으로 제작하였을 때 오류가 좀 잦은 경향이 있으욤... ㅠ... 근데 바닐라자바스크립트로 하면 엄청 가벼운데다가 setInterval이 아닌 setTimeout으로 하면 반응형 + (예제처럼 opacity가 아닌) 슬라이드 좌우 이동 형식에도 오류가 적을것 같네요. 아직 안해봐서 몰겠음
예제파일 (2020 01 23에 페이저 클릭해도 이동하는걸로 수정함)
'CSS&JS > ⚡Thinkers' 카테고리의 다른 글
| CSS 커스텀 체크박스 + vanilla JS로 체크박스 전체선택, 전체해제 (2) (0) | 2020.03.11 |
|---|---|
| checkbox 전체선택, 전체해제.... 한 페이지에 아이템이 여러개 있을 경우 / 여러페이지 일괄 적용 가능한 vanilla JS (0) | 2020.01.30 |
| textarea에 입력시 다른 textarea 들에도 실시간으로 같은 내용 입력되게 하기 (0) | 2020.01.16 |
| 경ㄱ ㅣ도청 홈페이지 서브메뉴 (0) | 2020.01.03 |
| CSS 만으로 input의 label을 이용하여 floating label 만들기 (0) | 2019.12.19 |