“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
슬라이드 이펙트 - 좌로 움직이기(연속적)
💜 슬라이더 이펙트 04
style
<style>
/* slider__wrap */
.slider__wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider__img { /* 이미지가 보이는 영역 */
position: relative;
width: 800px;
height: 450px;
overflow: hidden;
}
.slider__inner { /* 이미지 움직이는 영역 = 전체 이미지를 감싸고있는 부모 : 움직이는 영역 */
display: flex;
flex-wrap: wrap;
width: 4800px; /* 총 이미지 4800 */
height: 450px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>이미지가 보이는 영역,
이미지가 움직이는 영역 = 전체 이미지를 감싸고 있는 부모,
총 이미지, 개별적인 이미지에 대한 css입니다.
body
<body class="img05 bg01 font04">
<header id="header">
<h1>Javascript Slider Effect04</h1>
<p>04. 슬라이드 이펙트 : 좌로 움직이기(연속적으로)<p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect02.html">2</a></li>
<li><a href="sliderEffect03.html">3</a></li>
<li class="active"><a href="sliderEffect04.html">4</a></li>
<li><a href="sliderEffect05.html">5</a></li>
<li><a href="sliderEffect06.html">6</a></li>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider s1"><img src="./img/sliderEffect02-min.jpg" alt="이미지1"></div>
<div class="slider s2"><img src="./img/sliderEffect01-min.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="./img/sliderEffect03-min.png" alt="이미지3"></div>
<div class="slider s4"><img src="./img/sliderEffect04-min.jpg" alt="이미지4"></div>
<div class="slider s5"><img src="./img/sliderEffect05-min.jpg" alt="이미지5"></div>
</div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:hunmi961119@gmail.com">hunmi961119@gmail.com</a>
</footer>
<!-- //footer -->body 안에 사진을 넣어주고 작업합니다.
script
<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; //이미지 변경 간격 시간
let sliderWidth = slider[0].offsetWidth; //이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사
//복사한 첫 번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect (){
currentIndex++;
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";
//마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateX(0px)";
}, 700)
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>슬라이드 이미지의 width값을 구하는 offsetWidth
sliderClone을 이용해 첫번째 이미지 복사
sliderClone 요소를 sliderInner 변수의 마지막 자식 요소로 추가
이를 통해 마지막 이미지에서 다시 첫 번째 이미지로 이동할 때 자연스러운 전환효과를 줍니다.
함수를 이용해 슬라이더 이미지를 변겨시켜줍니다.
currentIndex++ 로 현재 이미지에 1을 증가시킵니다.
슬라이더 이미지 변경에 애니메이션을 추가하고
슬라이더 이미지를 sliderWidth + currentIndex 만큼 왼쪽으로 이동시킵니다.
현재 이미지 인덱스가 슬라이더 이미지 개수와 같을 경우
슬라이더 이미지 변경 애니메이션을 없애고, 슬라이더 이미지를 원래 위치로 되돌립니다.
다시 인덱스를 0으로 초기화 합니다.
GSAP
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
gsap.to(sliderInner, {
duration: 0.6,
x: -sliderWidth * currentIndex,
onComplete: function (){
if(currentIndex == sliderCount){
gsap.to(sliderInner, {
duration: 0,
x: 0,
});
currentIndex = 0;
}
},
});
}
setInterval(sliderEffect, sliderInterval);
</script>GSAP 라이브러리의 to()메서드를 사용해 이미지 슬라이더를 제어합니다.
to() 메서드는 지속시간 duration과 이동거리 x를 인수로 받아서
sliderInner 요소를 이동시킵니다.
이동이 완료될 때마다 onComplete 콜백 함수가 호출되며, 이 함수에서는 currentIndex값이 slidercount와 같아졌는지 확인하여 이미지가 모두 표시되었는지를 확인합니다.
이미지가 모두 표시되었다면 sliderInner요소의 x위치를 0으로 초기화 하고 currentIndex 변수를 0으로 재설정합니다.
jQuery
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
// 첫번째 이미지를 마지막에 복사하여 붙여넣기
$(".slider__inner").append(sliderClone);
function sliderEffect() {
currentIndex++;
$(".slider__inner").css({
"transition": "all 0.6s",
"transform": "translateX(-" + sliderWidth * currentIndex + "px)"
});
// 마지막 이미지에 위치 했을 때
if (currentIndex === sliderCount) {
setTimeout(function() {
$(".slider__inner").css({
"transition": "0s",
"transform": "translateX(0px)"
});
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>$(".slider__inner").css()메서드를 사용해 슬라이더의 위치를 이동시키는 효과를 구현
transition속성을 사용해
이동하는 동안 애니메이션 효과를 부여
transform 속성을 사용해 이미지를 이동
currentIndex값이 sliderCount 값과 같아지면, 마지막 이미지에 위치했다는 것을 의미