전에는 그냥 좌측으로 이동했다가 이미지가 끝나면 다시 앞쪽 이미지로 돌아왔지만 이번엔 연속적으로 이미지가 계속 나오는 슬라이드 효과를 만들어보았습니다.
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>04. 슬라이드 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.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: 450px;
overflow: hidden;
}
.slider__inner{ /* 이미지 움직이는 영역 */
display: flex;
flex-wrap: wrap;
width: 4800px; /* 총 이미지 4800 */
height: 2250px;
position: relative;
}
.slider { /*개별적인 이미지*/
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img04 bg05 font06">
<header id="header">
<h1>JavaScript Slider Effect04</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 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/sliderEffect07-min.jpg" alt=""></div>
<div class="slider s2"><img src="./img/sliderEffect08-min.jpg" alt=""></div>
<div class="slider s3"><img src="./img/sliderEffect09-min.jpg" alt=""></div>
<div class="slider s4"><img src="./img/sliderEffect10-min.jpg" alt=""></div>
<div class="slider s5"><img src="./img/sliderEffect01-min.jpg" alt=""></div>
</div>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
<a href="1346zany@gmail.com">1346zany@gmail.com</a>
</footer>
<!-- //footer-->
</body>
</html>
script
이번에도 javascript, GSAP, jQury 세 가지 방법으로 짜는 법을 소개해보겠습니다.
선택자
<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 = 1000; //이미지 변경 간격 시간
let sliderWidth = slider[0].offsetWidth; //이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사
</script>선택자로 각 요소를 선택해줍니다.
이번엔 offsetWidth를 통해 이미지의 가로값을 구해줬습니다.
.firstElementChild는 DOM에서 특정 엘리먼트의 첫번째 자식 요소(element)를 반환하는 속성입니다.
cloneNode(true)는 DOM에서 특정 요소를 복사할 때 사용하는 메서드입니다.
javascript
<!-- javascript -->
<script>
//복사한 첫번째 이미지 마지막에 붙여넣기
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)";
currentIndex = 0;
}, 700)
}
};
setInterval(sliderEffect, sliderInterval);
</script>appendChild는 요소에 새로운 자식요소를 추가하는 매서드입니다.
liderEffect 함수는 이미지 슬라이더가 동작할 때 실행됩니다.
동작이 싱행될떄 style을 설정해줍니다.
currentIndex가 sliderCount와 같아지면, 현재 슬라이드가 마지막 슬라이드이므로, sliderInner의 transition 및 transform CSS 속성을 수정하여 첫 번째 슬라이드로 다시 돌아가도록합니다.
setInterval 함수를 사용하여 sliderEffect 함수가 일정한 간격으로 실행되도록 설정합니다.
etTimeout() 함수를 사용하여 슬라이더가 마지막 이미지에 위치할 때, sliderInner의 위치를 변경하고, 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 });
// 마지막 이미지에 위치했을 때
if (currentIndex == sliderCount) {
setTimeout(() => {
gsap.to(sliderInner, {
duration: 0,
x: 0,
});
currentIndex = 0;
}, 700);
}
}
setInterval(sliderEffect, sliderInterval);
</script>sliderEffect() 함수는 이미지를 한 칸씩 이동시키는 함수입니다. currentIndex를 1씩 증가시키고, gsap.to()를 사용하여 sliderInner 요소를 이동시킵니다. 이때, duration은 애니메이션 진행 시간을 나타내며, x는 요소를 이동시킬 좌표를 나타냅니다.
currentIndex가 sliderCount와 같아지면, 마지막 이미지에 도달한 것이므로, setTimeout()을 사용하여 0.7초 후에 첫 번째 이미지로 이동하도록 설정합니다.
이때, gsap.to()를 사용하여 sliderInner 요소를 이동시키고, currentIndex를 0으로 초기화합니다
마지막으로, setInterval() 함수를 사용하여 sliderEffect() 함수를 일정 시간 간격으로 반복 실행합니다.
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").animate({ left: -sliderWidth * currentIndex }, 600);
// 마지막 이미지에 위치했을 때
if (currentIndex == sliderCount) {
setTimeout(() => {
$(".slider__inner").animate({ left: 0 }, 0);
currentIndex = 0;
}, 700);
}
}
setInterval(sliderEffect, sliderInterval);
</script>currentIndex를 1씩 증가시키고, animate()를 사용하여 slider__inner 요소를 이동시킵니다. 이때, left는 요소를 이동시킬 좌표를 나타내며, 600은 애니메이션 진행 시간을 나타냅니다.
currentIndex가 sliderCount와 같아지면, 마지막 이미지에 도달한 것이므로, setTimeout()을 사용하여 0.7초 후에 첫 번째 이미지로 이동하도록 설정합니다.
이때, animate()를 사용하여 slider__inner 요소를 이동시키고, currentIndex를 0으로 초기화합니다.
마지막으로, setInterval() 함수를 사용하여 sliderEffect() 함수를 일정 시간 간격으로 반복 실행합니다.