목록Script Sample/slider effect (8)
초짜코딩의 잡동사니
sliderEffect08 - 무한, 버튼 추가, 닷 버튼 추가, 자동플레이, 시작버튼, 정지버튼
const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); // 이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); // 5개의 이미지 const sliderBtn = document.querySelector(".slider__btn") // 버튼 const sliderBtnPrev = sliderBtn.querySelector(".prev") // 왼쪽 버..
sliderEffect07 - 무한, 닷 버튼 추가
const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); // 이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); // 5개의 이미지 const sliderBtn = document.querySelector(".slider__btn") // 버튼 const sliderBtnPrev = sliderBtn.querySelector(".prev") // 왼쪽 버..
sliderEffect06 - 닷 버튼 추가
const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); // 이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); // 5개의 이미지 const sliderBtn = document.querySelector(".slider__btn") // 버튼 const sliderBtnPrev = sliderBtn.querySelector(".prev") // 왼쪽 버..
sliderEffect05 - 버튼 추가
const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); // 이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); // 5개의 이미지 const sliderBtn = document.querySelector(".slider__btn") // 버튼 const sliderBtnPrev = sliderBtn.querySelector(".prev") // 왼쪽 버..
sliderEffect04 - 위로 움직이기
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 = sliderImg.offsetHeight // 이미지 ..
sliderEffect03 - 연속으로 슬라이드
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 sliderWidth = sliderImg.offsetWidth //이미지 가로값 le..