- 위의 페이지처럼 시간이 지나면 사진이 좌우로 바뀌는 스크립트입니다.
- 이번에도 javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다.
- 스크립트 코드를 같이 보시죠
선택자
- 선택자와 전역변수들을 하나로 모아놨습니다.
<script>
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); // 이미지가 보이는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); // 이미지가 움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); // 개별적인 이미지
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 3000; //이미지 변경 시간
</script>Javascript
<script>
sliderInner.style.transiton = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount ;
sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)"
},sliderInterval);
</script>- 먼저 javascript입니다.
- setInterval 함수를 사용해서 정해진 시간마다 함수가 실행되게 해주었습니다.
- currentIndex = (currentIndex + 1) % sliderCount;으로 이미지의 인덱스 값을 구해서,
sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)" },sliderInterval);로 sliderInner에게 X축으로 800px씩 움직이는 transform속성을 부여하였습니다. X축으로 800px씩 움직이는 이유는 사진의 넓이가 800px이기 때문입니다.
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
setInterval(() => {
currentIndex = (currentIndex + 1) % $(".slider").length;
$(".slider__inner").css("position", "relative")
$(".slider__inner").animate({left : -800 * currentIndex}, 1000, "easeOutElastic");
}, sliderInterval);
</script>- 다음은 jQuery도 기본적인 것은 비슷합니다.
- 다른 점이라면 $를 통해서 요소를 선택한 다는 것이 다릅니다.
- 애니메이션을 주는 방법이 조금 다릅니다.
- jQuery는 transform이 나오기 전에 출시된 것이고 업데이트가 안되고 있기 때문에 transform을 사용하지 못합니다.
- 그래서 slider__inner에게 position : relative를 준 뒤 사진의 위치를 800px씩 움직이는 방법을 사용하였습니다.
GSAP
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
gsap.to(".slider__inner", {
x : -800 * currentIndex,
duration : 1,
ease : "elastic.out(1, 0.3)"
})
}, sliderInterval);
</script>- GSAP도 어렵지 않습니다.
- setInterval를 사용해서 정해진 간격마다 함수가 실행되게 해준 뒤 currentIndex에 사진의 순서 1,2,3,4,0 이 반복되게 해줍니다.
- 그리고 gsap.to를 사용해서 x축으로 800px 씩 가게하면 끝이납니다.
- duration 과 ease는 넘어가는 속도와 효과로 사용하게 된다면 속도를 조절할 수 있고 다양한 효과를 줄 수 있습니다.
- 끝!