728x90
슬라이드 이펙트 - 이미지 슬라이드(버튼)
next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. 사이트의 우측 하단에 소스 보기를 누르면 html, css, javascript 소스를 모두 확인할 수 있습니다.
자바스크립트 방식
슬라이드 효과를 위한 자바스크립트 작성법입니다. next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. prev버튼을 눌렀을 때 이미지1에서 이미지5로 넘어가기 위해 console.log(currentIndex)로 확인하고, 4, 3, 2, 1, 0을 반복하기 위해 currentIndex에 4를 더해줍니다.
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"); //왼쪽버튼
const sliderBtnNext = sliderBtn.querySelector(".next"); //오른쪽버튼
let currentIndex = 0; //현재 이미지
let sliderCount = slider.length //이미지 갯수
let sliderWidth = sliderImg.offsetWidth; //이미지 가로값
//이미지 움직이는 영역
function gotoSlider(num) {
sliderInner.style.transition = "all 400ms"; //400ms -> 0.4s
sliderInner.style.transform = "translateX(" + -sliderWidth * num + "px)";
currentIndex = num;
}
//왼쪽 버튼 클릭했을 때
sliderBtnPrev.addEventListener("click", () => {
let prevIndex = (currentIndex + (sliderCount - 1)) % sliderCount;
gotoSlider(prevIndex);
console.log(currentIndex) //4,3,2,1,0,4,3,2,1,0 반복
});
//오른쪽 버튼 클릭했을 때
sliderBtnNext.addEventListener("click", () => {
let nextIndex = (currentIndex + 1) % sliderCount;
gotoSlider(nextIndex);
//0, 1, 2, 3, 4
});
728x90
반응형
'JAVASCRIPT Effect' 카테고리의 다른 글
| PARALLAX Effect 05 (3) | 2022.09.20 |
|---|---|
| PARALLAX Effect 04 (1) | 2022.09.18 |
| Mouse Effect 02 (2) | 2022.09.18 |
| PARALLAX Effect 03 (2) | 2022.09.13 |
| PARALLAX Effect 02 (2) | 2022.09.13 |
댓글