완성 화면
코드 보기 / JAVASCRIPT
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 sliderInterval = 3000; //다음 이미지로 넘어가는 간격의 시간
let sliderCount = slider.length; //전체 이미지의 총 수
let sliderWidth = sliderWrap.querySelector(".slider__img").offsetWidth; //이미지 width 값
let sliderHeight = sliderWrap.querySelector(".slider__img").offsetHeight; //이미지 height 값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //슬라이드 이미지 중 첫번째 요소(이미지)를 복사
//sliderClone을 슬라이드 될 이미지의 마지막에 추가(붙여넣기)
sliderInner.appendChild(sliderClone);
function sliderEffect() {
currentIndex++;
sliderInner.style.transition = "all 0.5s";
sliderInner.style.transform = `translateY(-${sliderHeight*currentIndex}px)`;
//마지막 슬라이드일 때
if(currentIndex == sliderCount){
setTimeout(()=>{
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateY(0px)"
},500);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
querySelector() 메서드를 사용하여 HTML 문서에서 이미지 슬라이드 쇼의 요소들을 가져온다.
querySelector() 메서드는 CSS 선택자를 사용하여 문서에서 요소를 선택할 수 있다.
그리고 let 키워드를 사용하여 몇 가지 변수를 정의한다.
currentIndex 변수는 현재 보이는 이미지의 인덱스를 저장하며, sliderInterval 변수는 이미지가 전환되는 간격을 나타낸다.
sliderCount 변수는 전체 이미지의 수를 저장하고, sliderHeight 변수는 이미지의 높이를 저장한다.
cloneNode() 메서드를 사용하여 첫 번째 이미지를 복제한 sliderClone 요소를 만들고, appendChild() 메서드를 사용하여 sliderClone 요소를 sliderInner 요소의 마지막 자식으로 추가한다.
이렇게 하면 슬라이드가 무한으로 반복되는 효과를 구현할 수 있다.
그리고 sliderEffect() 함수를 만든다.
이 함수는 setInterval() 메서드를 사용하여 일정한 간격으로 호출되며, currentIndex 변수를 증가시킨다.
그리고 style 속성을 사용하여 sliderInner 요소를 이동시키는 애니메이션 효과를 적용한다.
마지막 슬라이드일 경우 setTimeout() 메서드를 사용하여 일정 시간 후에 sliderInner 요소를 초기화시킨다.
마지막으로 setInterval() 메서드를 사용하여 sliderEffect() 함수를 일정한 간격으로 호출한다.
코드 보기 / GSAP
sliderInner.appendChild(sliderClone);
function sliderEffect() {
currentIndex++;
gsap.to(sliderInner, {
duration: 0.5,
y: -sliderHeight * currentIndex,
ease: "power2.inOut",
onComplete: () => {
if (currentIndex == sliderCount) {
gsap.set(sliderInner, { y: 0 });
currentIndex = 0;
}
},
});
}
setInterval(sliderEffect, sliderInterval);
이 코드에서는 sliderHeight 변수를 사용하여 이미지의 높이를 계산하여 이동합니다.
gsap.to() 메소드를 사용하여 sliderInner 요소를 이동시키고, duration 옵션을 사용하여 애니메이션 시간을 설정한다.
y 옵션을 사용하여 sliderInner 요소를 y축 방향으로 이동시키고, ease 옵션을 사용하여 이동 효과를 설정합니다.
onComplete 콜백 함수는 애니메이션이 끝난 후 실행되며, 현재 이미지가 마지막 이미지인 경우 슬라이더를 초기 상태로 되돌리고, currentIndex 변수를 0으로 설정한다.
setInterval() 메소드를 사용하여 sliderEffect() 함수를 주기적으로 실행하여 이미지 슬라이더를 자동으로 이동시킨다.
코드 보기 / Jquery
setInterval(() => {
const sliderClone = $(".slider__inner .slider:first-child").clone(true);
$(".slider__inner").append(sliderClone);
currentIndex++;
let sliderHeight = -currentIndex * $(".slider__img").height();
$(".slider__inner").css("transition", "all 0.5s").css("transform", `translateY(${sliderHeight}px)`);
if (currentIndex == sliderCount) {
setTimeout(() => {
$(".slider__inner").css("transition", "0s").css("transform", "translateY(0px)");
}, 500);
currentIndex = 0;
}
}, sliderInterval);
setInterval(() => { ... })
: setInterval( ) 함수는 일정한 간격으로 함수를 반복 실행한다.
const sliderClone = $(".slider__inner .slider:first-child").clone(true);
: 첫번째 슬라이드를 복제하여 sliderClone 변수에 할당한다.
이 때, true를 인자로 넘겨서 하위 요소들까지 모두 복제하도록 한다.
$(".slider__inner").append(sliderClone);
: 복제된 슬라이드를 슬라이더 내부에 추가한다.
currentIndex++;
: 현재 슬라이드의 인덱스 값을 1 증가시킵니다.
let sliderHeight = -currentIndex * $(".slider__img").height();
: sliderHeight 변수에는 현재 슬라이드의 인덱스를 이용하여 슬라이더가 이동해야 할 거리를 계산한다.
이 값은 현재 슬라이드의 인덱스와 슬라이드 이미지의 높이를 곱한 것의 음수값으로 설정된다.
음수값을 사용하는 이유는 슬라이드가 이동해야 할 거리가 슬라이더의 방향과 반대이기 때문이다.
$(".slider__inner").css("transition", "all 0.5s").css("transform", `translateY(${sliderHeight}px)`);
: CSS transition 속성과 transform 속성을 이용하여 슬라이더가 이동하도록 한다.
transition 속성은 0.5초 동안 모든 속성에 대한 전환 효과를 설정하고, transform 속성은 translateY 함수를 사용하여 sliderHeight 값만큼 슬라이더를 이동시킨다.
if (currentIndex == sliderCount) {
: 현재 슬라이드 인덱스가 전체 슬라이드 개수와 같아졌을 때, 모든 슬라이드를 보여준 것이므로 다시 처음부터 시작해야 한다.
$(".slider__inner").css("transition", "0s").css("transform", "translateY(0px)");
: 슬라이더를 초기화하여 다시 처음부터 시작하도록 한다.
transition 속성을 0초로 설정하여 애니메이션 효과가 없도록 한다.
currentIndex = 0;
: 현재 슬라이드 인덱스 값을 0으로 초기화합니다.
}, sliderInterval);
: setInterval() 함수의 두번째 인자로 전달된 sliderInterval 변수는 슬라이드 전환 간격을 지정하는 값이다.
이 값은 일정한 간격으로 실행되는 함수를 정의하는 람다 함수의 실행 주기를 지정한다.
