좌측으로 연속적으로 이미지를 움직이는 슬라이드를 만들었습니다.
마지막 이미지가 나온 후 다시 첫번째 이미지부터 보여주기를 반복합니다.
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">
</head>
<body class="img04 bg04 font04">
<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/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: 450px;
overflow: hidden;
}
.slider__inner { /* 이미지 움직이는 영역 */
display: flex;
flex-wrap: wrap;
width: 4800px; /* 총 이미지 4800px */
height: 450px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>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 sliderWidth = slider[0].offsetWidth // 이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫번째 이미지 복사
// 복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);javascript
<script>
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>sliderEffect() 함수는 이미지를 슬라이드 하는 함수입니다.
currentIndex 변수를 1씩 증가시키고, sliderInner 요소의 transform 속성을 이용해 이미지를 이동시킵니다.
이때 sliderWidth 변수를 이용하여 이미지의 가로폭을 계산하고, currentIndex와 곱하여 이동 거리를 계산합니다.
이동 효과는 transition 속성을 이용하여 0.6초 동안 적용됩니다.
setInterval() 함수를 이용하여 sliderEffect() 함수를 일정 간격으로 반복 실행합니다.
이때 sliderInterval 변수를 이용하여 이미지 변경 간격을 설정합니다.
마지막 이미지에 위치했을 때는 setTimeout() 함수를 이용하여 0.7초 후에 이전 위치로 이동하도록 합니다.
이때 transition 속성을 0초로 설정하여 부드러운 이동 효과를 제거합니다.
currentIndex 변수는 0으로 초기화하여 처음부터 이미지를 다시 슬라이드 할 수 있도록 합니다.
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, x: -sliderWidth * currentIndex, ease: "power2.inOut" });
// 마지막 이미지에 위치 했을 때
if (currentIndex == sliderCount) {
setTimeout(() => {
gsap.to(sliderInner, { duration: 0, x: 0 });
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>먼저, GSAP 라이브러리를 로드합니다. 이 라이브러리는 JavaScript로 애니메이션을 쉽게 만들 수 있게 해줍니다.
sliderEffect 함수는 이미지를 슬라이드시키는 핵심 함수입니다.
이 함수는 currentIndex 변수를 증가시켜 현재 보이는 이미지를 변경하고, gsap.to 함수를 이용하여 sliderInner 요소를 움직입니다.
duration 속성은 애니메이션의 지속 시간을 설정하고, x 속성은 sliderWidth * currentIndex 만큼 이동시킵니다.
ease 속성은 이동할 때 적용되는 애니메이션 효과를 설정합니다.
마지막으로, 이미지가 마지막에 위치했을 때는 setTimeout 함수를 이용하여 0.7초 후에 첫 번째 이미지로 이동하도록 구현합니다.
이때, gsap.to 함수의 duration 속성은 0으로 설정하여 애니메이션 없이 바로 이동하도록 합니다.
setInterval 함수는 sliderEffect 함수를 주기적으로 호출하여 이미지가 자동으로 슬라이드되도록 합니다.
sliderInterval 변수는 이미지 변경 간격 시간을 설정합니다.
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({ left: -sliderWidth * currentIndex }, 600, "easeInOutQuad");
// 마지막 이미지에 위치 했을 때
if (currentIndex == sliderCount) {
setTimeout(() => {
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({ left: 0 }, 0);
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>먼저, sliderEffect 함수에서 currentIndex를 증가시켜 다음 이미지로 이동하고, jQuery의 animate 메소드를 사용하여 slider__inner 요소를 왼쪽으로 이동시킵니다.
animate 메소드의 첫번째 매개변수는 CSS 속성과 값을 객체 형태로 전달하며, 두번째 매개변수는 애니메이션 시간(밀리초)을 전달합니다.
세번째 매개변수는 이징(easing) 함수를 전달하는데, 이 함수를 사용하면 애니메이션 효과를 부드럽게 할 수 있습니다.
이어서, currentIndex가 이미지 갯수(sliderCount)와 같아지면, setTimeout을 사용하여 animate 메소드를 호출하여 slider__inner 요소를 처음 위치로 이동시킵니다.
이때, 애니메이션 시간은 0으로 설정하여 즉시 이동하도록 합니다.
마지막으로, setInterval을 사용하여 sliderEffect 함수를 일정 시간 간격으로 반복 호출하여 이미지를 자동으로 슬라이드하도록 합니다.