728x90
슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한)
next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. 마지막 슬라이더에서 next 버튼 눌렀을 때 앞으로 다시 스르륵 이동하는 것이 아니라 자연스럽게 옆으로 넘어가는 방식입니다.
자바스크립트 방식
슬라이드 효과를 위한 자바스크립트 작성법입니다. next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. 마지막 슬라이드에서 자연스럽게 첫 번째 슬라이드로 넘어가기 위해 첫 번째 이미지를 마지막 사진 옆으로 복사하고, 첫 번째 사진에서 마지막 사진으로 다시 이동할 때, 마지막 이미지를 복사하여 첫번째 사진 옆으로 붙여넣기를 하였습니다.
const sliderWrap = document.querySelector(".slider__wrap"); // 전체 이미지 슬라이드
const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = document.querySelector(".slider__inner"); // 움직이는 영역
const slider = document.querySelectorAll(".slider"); // 각각의 이미지
const sliderDot = document.querySelector(".slider__dot"); // 닷메뉴
const sliderBtn = document.querySelector(".slider__btn"); // 버튼
const sliderBtnPrev = document.querySelector(".slider__btn .prev"); // 왼쪽 버튼
const sliderBtnNext = document.querySelector(".slider__btn .next"); // 오른쪽 버튼
let currentIndex = 0, // 현재 이미지
sliderLength = slider.length, // 슬라이더 갯수
sliderWidth = slider[0].offsetWidth, // 슬라이더 크기
sliderFirst = slider[0], // 첫 번째 이미지
sliderLast = slider[sliderLength - 1], // 마지막 이미지
cloneFirst = sliderFirst.cloneNode(true), // 첫 번째 이미지 복사
cloneLast = sliderLast.cloneNode(true), // 마지막 이미지 복사
dotIndex = "";
sliderInner.appendChild(cloneFirst); // appendChild(마지막 자식) => sliderInner의 마지막 자식에 첫 번째 이미지 복사
sliderInner.insertBefore(cloneLast, sliderFirst);
function init() {
// 이미지 갯수만큼 닷메뉴 생기게
for (let i = 0; i < sliderLength; i++) { // for문 이용해서 닷메뉴 추가
dotIndex += "<a href='#' class='dot'>이미지1</a>";
}
sliderDot.innerHTML = dotIndex;
sliderDot.firstChild.classList.add("active"); // 첫 번째 이미지에만 active 생기게
}
init();
function gotoSlider(direction) {
sliderInner.classList.add("transition"); // 평소에는 transition 됐다가 순간이동 했을때는 안되게
sliderBtn.classList.add("disable");
posInitial = sliderInner.offsetLeft; // 이미지를 왼쪽으로 이동하게 했기 때문에 offsetLeft 값을 구해 넣어준다.
// console.log(posInitial) => 값이 나오는지 확인
if (direction == -1) {
sliderInner.style.left = (posInitial + sliderWidth) + "px"; // 이미지가 더 생겨서 위치값이 달라졌기 때문에 초기화
currentIndex--;
} else if (direction == 1) {
sliderInner.style.left = (posInitial - sliderWidth) + "px"; // 이미지가 더 생겨서 위치값이 달라졌기 때문에 초기화
currentIndex++;
}
}
// 이미지 슬라이드 순간이동
function checkIndex() {
sliderInner.classList.remove("transition");
console.log(currentIndex);
// 마지막 이미지에서 처음이미지로
if (currentIndex == sliderLength) {
sliderInner.style.left = -(1 * sliderWidth) + "px";
currentIndex = 0;
}
// 처음 이미지에서 마지막 이미지로
if (currentIndex == -1) {
sliderInner.style.left = -(sliderLength * sliderWidth) + "px";
currentIndex = sliderLength - 1;
}
// 두번째 이미지를 보면 두번째 닷에 클래스 추가
let dotActive = document.querySelectorAll(".slider__dot .dot"); // 개별의 닷메뉴
dotActive.forEach(el => el.classList.remove("active")); // 1. 닷메뉴 클래스 모두 삭제
dotActive[currentIndex].classList.add("active"); // 2. 개별의 닷메뉴에 클래스 추가
}
// 닷 버튼 클릭했을 때 해당 닷버튼의 이미지로 이동
document.querySelectorAll('.slider__dot .dot').forEach((a, index) => {
a.addEventListener('click', e => {
document.querySelectorAll('.slider__dot .dot').forEach(b => {
b.classList.remove('active');
});
a.classList.add('active');
sliderInner.style.left = `${-((index + 1) * sliderWidth)}px`;
sliderInner.classList.add("transition")
currentIndex = index;
});
});
// prev 버튼 클릭했을 때
sliderBtnPrev.addEventListener("click", () => {
gotoSlider(-1)
setTimeout(() => {
sliderBtn.classList.remove("disable")
}, 300);
});
// next 버튼 클릭했을 때
sliderBtnNext.addEventListener("click", () => {
gotoSlider(1);
setTimeout(() => {
sliderBtn.classList.remove("disable")
}, 300);
});
sliderInner.addEventListener("transitionend", checkIndex); // transitionend : transition이 끝났을 때 => transition이 끝나면 순간이동 위해 checkIndex 함수 실행
728x90
반응형
'JAVASCRIPT Effect' 카테고리의 다른 글
| SEARCH Effect 06 (1) | 2022.10.23 |
|---|---|
| SLIDER Effect 07 (1) | 2022.10.23 |
| SLIDER Effect 05 (1) | 2022.10.23 |
| PARALLAX Effect 07 (3) | 2022.10.10 |
| PARALLAX Effect 06 (2) | 2022.09.29 |
댓글