01. JavaScript - 이미지 슬라이드 ImageSlide

이미지 슬라이드 Carousel

 

자바스크립트 공부중 구현해본 이미지 슬라이드, 복습 겸 간단하게나마 구현하여 기록해 보았습니다.
(맥북 15인치 환경에서 작업하였습니다. 간혹, 모바일 환경에서는 제대로 나오지 않을 수 있습니다.)

 

See the Pen abbQozz by pilyeong (@pilyeooong) on CodePen.

 

item 갯수만큼 slider의 크기를 유동적으로 설정하도록 하였으므로, item의 컨텐츠를 추가하여도 코드 수정이 불필요하도록 구현.
코드 사용시에는 필요에 따라 버튼이나 컨텐츠 , 크기 등 부분만 고쳐 사용하면 될 듯 합니다.

 

  See the Pen https://codepen.io/pilyeooong/pen/KKKGOGe">
  KKKGOGe by pilyeong (https://codepen.io/pilyeooong">@pilyeooong)
  on https://codepen.io">CodePen.

 

첫번째 예시 코드를 살짝 변형하여 자동으로 슬라이드가 넘어가도록 설정한 예시입니다.
setTimeout을 이용하여 일정시간이 지나면 슬라이드가 넘어가도록 한것입니다.

 

---

 

감사합니다.