Gwni Lab GwniLab

//설명. 참고사항. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); const sliderInner = document.querySelector(".slider__inner"); const slider = document.querySelectorAll(".slider"); const sliderBtn = document.querySelector(".slider__btn"); const sliderBtnPrev = document.querySelector(".prev"); const sliderBtnNext = document.querySele..

setInterval()을 이용한 이미지 슬라이드 - 닷 버튼 추가 //설명. 참고사항. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); const sliderInner = document.querySelector(".slider__inner"); const slider = document.querySelectorAll(".slider"); const sliderBtn = document.querySelector(".slider__btn"); const sliderBtnPrev = document.querySelector(".prev"); co..

setInterval()을 이용한 이미지 슬라이드 - 닷 버튼 추가 //설명. 참고사항. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); const sliderInner = document.querySelector(".slider__inner"); const slider = document.querySelectorAll(".slider"); const sliderBtn = document.querySelector(".slider__btn"); const sliderDot = document.querySelector(".slider__dot");..

setInterval()을 이용한 이미지 슬라이드 - 버튼 추가 //설명. 참고사항. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); const sliderInner = document.querySelector(".slider__inner"); const slider = document.querySelectorAll(".slider"); const sliderBtn = document.querySelector(".slider__btn"); const sliderBtnPrev = sliderBtn.querySelector(".prev"); con..

setInterval()을 이용한 이미지 슬라이드 - 위로 움직이기 //설명. 참고사항. const sliderWrap = document.querySelector(".slider__wrap") const sliderImg = document.querySelector(".slider__img") //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner") //이미지 움직이는 영역 (틀) const slider = document.querySelectorAll(".slider") // 5개의 이미지가 저장 let currentIndex = 0; let sliderCount = slider.length; let sliderHeight =..

setInterval()을 이용한 이미지 슬라이드 - 연속적으로 넘기기 //설명. 참고사항. const sliderWrap = document.querySelector(".slider__wrap") const sliderImg = document.querySelector(".slider__img") //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner") //이미지 움직이는 영역 (틀) const slider = document.querySelectorAll(".slider") // 5개의 이미지가 저장 // .slider__inner > div:first-child let currentIndex = 0; let sliderCou..

setInterval()을 이용한 이미지 슬라이드 - 좌로 움직이기 //설명. 참고사항. let currentIndex = -1; //첫 번째 이미지 (현재 보이는 이미지), -1로 주면 트랜지션이 잘 된다. let sliderCount = slider.length; //이미지 갯수 setInterval(()=>{ console.log(currentIndex); currentIndex = (currentIndex+1)%5; //currentIndex의 데이터 변경해서 01234가 나오게 if((currentIndex

setInterval()을 이용한 이미지 슬라이드 - 페이드 효과 //setInteval //slider01 const sliderWrap = document.querySelector(".slider__wrap") const sliderImg = document.querySelector(".slider__img") const slider = document.querySelectorAll(".slider") let currentIndex = 0; //현재 보이는 이미지 let sliderCount = slider.length; //이미지 갯수 setInterval(() => { let nextIndex =(currentIndex + 1) % 5; //1 2 3 4 0 1 2 3 4 0... 5로 나눠서 나..