Notice
Recent Posts
Recent Comments
Link
초짜코딩의 잡동사니
sliderEffect02 - 왼쪽으로 슬라이드 본문
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 = -1; //첫 번째 이미지(현재 보이는 이미지)
let sliderCount = slider.length; // 이미지 갯수
setInterval(() => {
console.log(currentIndex);
currentIndex = (currentIndex + 1) % 5; //0 1 2 3 4 0 1 2 3 4 ...
if(currentIndex < sliderCount -1){
currentIndex++;
} else {
currentIndex = 0;
}
(currentIndex < sliderCount-1) ? currentIndex++ : currentIndex = 0; //삼항연산자
//sliderInner.style.left = "-0px"; 800 * 0 첫번째 이미지
//sliderInner.style.left = "-800px"; 800 * 1 두번째 이미지
//sliderInner.style.left = "-1600px"; 800 * 2 세번째 이미지
//sliderInner.style.left = "-2400px"; 800 * 3 네번째 이미지
//sliderInner.style.left = "-3200px"; 800 * 4 다섯번째 이미지
//Javascript 애니메이션
//sliderInner.style.left = -800 * currentIndex + "px";
//sliderInner.style.transition = "all 0.6s ease"
//GSAP 애니메이션
gsap.to(sliderInner, {duration: 2.5, ease:"expo.out", left: -800 * currentIndex})
}, 2000 )
'Script Sample > slider effect' 카테고리의 다른 글
sliderEffect06 - 닷 버튼 추가 (0) | 2022.02.17 |
---|---|
sliderEffect05 - 버튼 추가 (0) | 2022.02.17 |
sliderEffect04 - 위로 움직이기 (0) | 2022.02.17 |
sliderEffect03 - 연속으로 슬라이드 (0) | 2022.02.16 |
sliderEffect01 -페이드 효과 (0) | 2022.02.15 |