티스토리 뷰
{
const sliderWrap = document.querySelector(".slider__wrap")
const sliderImg = document.querySelector(".slider__img") //이미지 보이는 영역
const sliderInner = document.querySelector(".slider__inner") //이미지 움직이는 영역
const slider = document.querySelectorAll(".slider")
let currentIndex = -1; //첫 번째 이미지(현재 보이는 이미지)
let sliderCount = slider.length //이미지 갯수
setInterval(()=>{
(currentIndex < sliderCount - 1) ? currentIndex++ : currentIndex =0;
//GSAP 애니메이션
gsap.to(sliderInner, {
duration:0.4,
left:-800 * currentIndex,
ease: "expo.out"
})
},3000)
}
'Script Sample > SliderEffect' 카테고리의 다른 글
Slider Effect 06 - 닷 추가 (0) | 2022.02.19 |
---|---|
Slider Effect 05 - 버튼 추가 (0) | 2022.02.19 |
Slider Effect 04 - 상,하로 움직이기 (0) | 2022.02.19 |
Slider Effect 03 - 연속적으로 움직이기 (0) | 2022.02.16 |
Slider Effect 01 - 페이드 효과 (0) | 2022.02.15 |
댓글
© 2018 webstoryboy