Notice
Recent Posts
Recent Comments
Link
초짜코딩의 잡동사니
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") // 왼쪽 버튼
const sliderBtnNext = sliderBtn.querySelector(".next") // 오른쪽 버튼
const sliderDot = document.querySelector(".slider__dot") //닷 버튼
let currentIndex = 0; // 첫번째 이미지
let sliderWidth = sliderImg.offsetWidth; // 이미지 가로값
let sliderLength = slider.length; // 이미지 갯수
let sliderFirst = slider[0]; // 첫번째 이미지
let sliderLast = slider[sliderLength-1]; // 마지막 이미지
let cloneFirst = sliderFirst.cloneNode(true); // 첫번째 이미지 복사
let cloneLast = sliderLast.cloneNode(true); // 마지막 이지미 복사
let posInitial ="";
let dotIndex = "";
// 이미지 복사 (제이쿼리: appendTo/prependTo : append/prepend)
sliderInner.appendChild(cloneFirst);
sliderInner.insertBefore(cloneLast, sliderFirst);
// 이미지 움직이기
function gotoslider(direction){
sliderInner.classList.add("transition");
posInitial = sliderInner.offsetLeft;
// 오른쪽 버튼
if(direction == 1){
// left = -800px
sliderInner.style.left = (posInitial-sliderWidth) + "px";
currentIndex++;
}
// 왼쪽 버튼
if(direction == -1){
sliderInner.style.left = (posInitial+sliderWidth) + "px";
currentIndex--;
}
dotActive()
}
//이미지 갯수만큼 dot을 추가
function dotInit(){
for(let i=0; i<sliderLength; i++){
dotIndex += ""
}
sliderDot.innerHTML = dotIndex;
sliderDot.firstElementChild.classList.add("active");
}
// 닷 버튼 활성화
function dotActive(){
let dotAll = document.querySelectorAll(".slider__dot .dot");
dotAll.forEach(dot =>{ //전체 닷버튼 비활성화
dot.classList.remove("active");
});
//마지막 이미지 왔을 때
if(currentIndex == sliderLength){
dotAll[0].classList.add("active");
}else if(currentIndex == -1){
dotAll[sliderLength -1].classList.add("active")
}else {
// 현재보고 있는 이미지 닷 활성화
dotAll[currentIndex].classList.add("active");
}
}
// 애니메이션 완료후
function checkIndex(){
sliderInner.classList.remove("transition")
// 이미지 시작 부분
if(currentIndex == -1){
sliderInner.style.left = -(sliderLength * sliderWidth) + "px"
currentIndex = sliderLength - 1;
}
// 이미지 마지막 부분
if(currentIndex == sliderLength){
sliderInner.style.left = -(1 * sliderWidth) + "px"
currentIndex = 0;
}
}
// 버튼 클릭하기
sliderBtnPrev.addEventListener("click",()=>{gotoslider(-1)});
sliderBtnNext.addEventListener("click",()=>{gotoslider(1)});
sliderInner.addEventListener("transitionend", checkIndex)
dotInit()
'Script Sample > slider effect' 카테고리의 다른 글
sliderEffect08 - 무한, 버튼 추가, 닷 버튼 추가, 자동플레이, 시작버튼, 정지버튼 (0) | 2022.04.13 |
---|---|
sliderEffect06 - 닷 버튼 추가 (0) | 2022.02.17 |
sliderEffect05 - 버튼 추가 (0) | 2022.02.17 |
sliderEffect04 - 위로 움직이기 (0) | 2022.02.17 |
sliderEffect03 - 연속으로 슬라이드 (0) | 2022.02.16 |