위로 연속적으로 이미지를 움직이는 슬라이드를 만들었습니다.
마지막 이미지가 나온 후 다시 첫번째 이미지부터 보여주기를 반복합니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05. 슬라이드 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">
</head>
<body class="img05 bg05 font05">
<header id="header">
<h1>Javascript Slider Effect05</h1>
<p>슬라이드 이펙트 : 위로 움직이기(연속적으로)</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><a href="sliderEffect04.html">4</a></li>
<li class="active"><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/sliderEffect04-min.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="./img/sliderEffect06-min.jpg" alt="이미지3"></div>
<div class="slider s4"><img src="./img/sliderEffect08-min.jpg" alt="이미지4"></div>
<div class="slider s5"><img src="./img/sliderEffect10-min.jpg" alt="이미지5"></div>
</div>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
<a href="mailto:hyejeong3283@gmail.com">hyejeong3283@gmail.com</a>
</footer>
<!-- //footer-->
</body>
</html>CSS
<style>
/* slider__wrap */
.slider__wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider__img { /* 이미지가 보이는 영역 */
position: relative;
width: 800px;
height: 520px;
overflow: hidden;
}
.slider__inner { /* 이미지 움직이는 영역 */
display: flex;
flex-wrap: wrap;
width: 800px; /* 총 이미지 4800px */
height: 3120px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 520px;
}
</style>위로 움직이는 이미지 슬라이드를 만들기 위해 이미지 height(이미지 세로값)을 520px로 맞추었습니다.
모든 이미지가 들어갈 슬라이드 영역의 height(세로값)은 3120px로 맞추었습니다.
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 sliderInterval = 3000; // 이미지 변경 간격 시간
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderHeight = slider[0].offsetHeight // 이미지 세로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫번째 이미지 복사
// 복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
</script>javascript
<!-- javascript -->
<script>
function sliderEffect() {
currentIndex++;
sliderInner.style.transition = "all 0.6s ease";
sliderInner.style.transform = `translateY(-${sliderHeight * currentIndex}px)`;
// 마지막 이미지에 위치 했을 때
if (currentIndex == sliderCount) {
setTimeout(() => {
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateY(0px)";
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>HTML 코드에서 slider__wrap, slider__img, slider__inner, slider 클래스를 가진 요소들을 변수에 할당합니다.
그리고 이미지 변경 간격 시간을 나타내는 sliderInterval 변수와 현재 보이는 이미지의 인덱스를 나타내는 currentIndex,
이미지 갯수를 나타내는 sliderCount, 이미지 세로값을 나타내는 sliderHeight 변수를 초기화합니다.
마지막으로 첫번째 이미지를 복사하여 마지막에 붙여넣는 작업을 수행합니다.
sliderEffect 함수는 이미지를 슬라이드하는 함수입니다.
함수가 호출될 때마다 currentIndex 변수를 증가시킵니다.
그리고 sliderInner 요소에 CSS transition 속성과 transform 속성을 적용하여 이미지를 위아래로 슬라이드합니다.
마지막 이미지에 위치했을 때, 0.7초 후에 transition 속성을 0으로 변경하고 transform 속성을 초기값으로 변경합니다.
그리고 currentIndex 변수를 0으로 초기화합니다.
setInterval 함수를 사용하여 sliderEffect 함수를 일정한 시간 간격으로 호출하여 이미지 슬라이더를 자동으로 움직이도록 합니다.
GSAP
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
function sliderEffect() {
currentIndex++;
gsap.to(sliderInner, { duration: 0.6, y: -sliderHeight * currentIndex, ease: "power2.inOut" });
// 마지막 이미지에 위치 했을 때
if (currentIndex == sliderCount) {
setTimeout(() => {
gsap.to(sliderInner, { duration: 0, y: 0 });
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>gsap.to() 함수를 사용하여 슬라이더를 이동시키고 있습니다.
이 함수는 속성을 애니메이션화할 수 있습니다.
여기서는 sliderInner를 duration 시간 동안 y축 방향으로 -sliderHeight * currentIndex 만큼 이동시키고 있습니다.
ease 속성은 이동하는 속도를 조절합니다.
currentIndex 변수는 슬라이더의 현재 위치를 나타냅니다.
슬라이더가 마지막 이미지에 위치했을 때, setTimeout() 함수를 사용하여 0.7초 뒤에 슬라이더를 처음 위치로 되돌리고 있습니다. 이후 currentIndex 값을 0으로 초기화합니다.
이 코드는 jQuery나 순수 JavaScript로 구현된 코드보다 간결하고 쉽게 이해할 수 있는 코드를 작성할 수 있도록 도와줍니다.
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>
function sliderEffect() {
currentIndex++;
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({ top: -sliderHeight * currentIndex }, 600, "easeInOutQuad");
// 마지막 이미지에 위치 했을 때
if (currentIndex == sliderCount) {
setTimeout(() => {
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({ top: 0 }, 0);
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>이미지 슬라이더는 .slider__inner 클래스를 가진 부모 요소 안에 여러 개의 이미지가 들어있습니다.
각각의 이미지는 position: absolute 속성으로 배치됩니다.
현재 보여지는 이미지의 인덱스는 currentIndex 변수에 저장되며, 슬라이더가 동작하는 간격은 sliderInterval 변수로 지정됩니다.
sliderEffect 함수는 setInterval 함수에 의해 일정한 간격으로 호출되며, 슬라이더를 움직이는 로직을 담고 있습니다. currentIndex를 1 증가시키고, .slider__inner 요소의 position 속성을 relative로 변경한 후, animate 함수를 이용하여 top 속성 값을 조정하여 슬라이더를 이동시킵니다.
마지막 이미지에 위치 했을 때는 0.7초 후에 animate 함수를 이용하여 슬라이더를 처음 위치로 이동시킵니다.