여러 이미지를 저장해 좌로 움직여 이미지를 보여주는 페이지를 만들었습니다.
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>01. 슬라이드 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">
</head>
<body class="img02 bg02 font02">
<header id="header">
<h1>Javascript Slider Effect02</h1>
<p>슬라이드 이펙트 : 좌로 움직이기</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li class="active"><a href="sliderEffect02.html">2</a></li>
<li><a href="sliderEffect03.html">3</a></li>
<li><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"><img src="./img/sliderEffect06-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect07-min.jpg" alt="이미지2"></div>
<div class="slider"><img src="./img/sliderEffect08-min.jpg" alt="이미지3"></div>
<div class="slider"><img src="./img/sliderEffect09-min.jpg" alt="이미지4"></div>
<div class="slider"><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: 4000px;
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 currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 3000; // 이미지 변경 간격 시간선택자를 변수를 선언하여 만들어줍니다.
위 선택자들은 javascript, GSAP, jQuery에서 공통적으로 사용해 줄겁니다.
javascript
<!-- javascript -->
<script>
sliderInner.style.transform = translateX("0px"); // -800 * 0
sliderInner.style.transform = translateX("-800px"); // -800 * 1
sliderInner.style.transform = translateX("-1600px");// -800 * 2
sliderInner.style.transform = translateX("-2400px");// -800 * 3
sliderInner.style.transform = translateX("-3200px");// -800 * 4
sliderInner.style.transform = translateX("0px"); // -800 * 0
javascript
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount; // 1 2 3 4 0 1 2 3 4 0
sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";
}, sliderInterval);
</script>sliderInner.style.transform은 CSS의 transform 속성을 이용해서 슬라이더 이미지의 위치를 조절합니다.
translateX() 함수를 이용하여 X축으로 이동시킵니다.
이때 인자로 입력된 값은 이미지가 보여지는 위치를 나타내며, -800 * currentIndex로 계산됩니다.
currentIndex는 현재 보이는 이미지의 인덱스를 나타내며, sliderCount는 이미지의 총 개수를 나타냅니다.
sliderInner.style.transition = "all 0.6s";는 CSS의 transition 속성을 이용해서 슬라이더 이미지의 애니메이션 속도를 조절합니다. 이 코드에서는 모든 속성에 대해서 0.6초의 시간을 할당합니다.
setInterval 함수를 이용해서 일정한 시간 간격으로 이미지가 변경됩니다.
sliderInterval 변수에는 이미지가 변경될 시간 간격이 저장되어 있습니다.
currentIndex = (currentIndex + 1) % sliderCount;로 현재 이미지의 인덱스 값을 갱신합니다.
인덱스의 범위는 0부터 sliderCount-1까지입니다.
즉, 0에서 sliderCount-1까지 반복하고 다시 0부터 시작하는 형태로 이미지가 변경됩니다.
sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";으로 이미지 슬라이더의 위치를 변경합니다. translateX() 함수를 이용해서 X축으로 이동시키며, 이때 이미지의 위치는 -800 * currentIndex로 계산됩니다.
이렇게 변경된 위치에 맞게 이미지 슬라이더를 이동시키는 효과가 나타납니다.
GSAP
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
gsap.to(".slider__inner", {
x : -800 * currentIndex,
duration : 1,
ease : "elastic.out(1, 0.3)"
})
}, sliderInterval);
</script>currentIndex와 sliderCount 변수는 슬라이드의 인덱스 및 슬라이드 총 개수를 저장합니다.
setInterval 함수를 사용하여 주기적으로 다음 슬라이드로 이동하도록 합니다.
gsap.to 함수를 사용하여 slider__inner 클래스에 대한 애니메이션을 만듭니다.
x 속성은 X축 방향으로 이동하는 위치를 지정하며 duration 속성은 애니메이션의 지속시간을 지정합니다.
ease 속성은 애니메이션의 이징 함수를 지정합니다.
elastic.out(1, 0.3)는 완화되는 역탄성 애니메이션을 나타냅니다.
1은 반동 수준을 지정하며 0.3은 시작할 때 덜 완화되는 정도를 나타냅니다.
즉, 이 코드는 slider__inner 요소를 X축으로 이동하여 슬라이드를 보여주는 애니메이션을 만드는데, 반동 효과를 추가하여 자연스러운 움직임을 보여줍니다.
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>
setInterval(() => {
currentIndex = (currentIndex + 1) % $(".slider").length;
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({left : -800 * currentIndex}, 600, "easeOutElastic");
}, sliderInterval);
</script>setInterval 함수를 사용하여 일정 시간 간격으로 이미지를 전환하도록 구현합니다.
현재 보이는 이미지의 인덱스를 currentIndex 변수에 저장하고, 다음에 보여질 이미지의 인덱스를 계산하여 currentIndex 변수를 업데이트 합니다.
$(".slider__inner")는 jQuery를 사용하여 .slider__inner 클래스를 가진 요소를 선택합니다.
.css() 메소드를 사용하여 .slider__inner 요소의 position 속성을 relative로 설정합니다.
이렇게 하면 .slider__inner 요소가 자신의 위치를 기준으로 이동합니다.
.animate() 메소드를 사용하여 .slider__inner 요소의 left 속성을 변경하여 슬라이드 효과를 구현합니다.
이 때, left 속성값을 -800 * currentIndex으로 설정하여 현재 보이는 이미지가 왼쪽으로 슬라이드되어 사라지고, 다음 이미지가 오른쪽에서 슬라이드되어 보이도록 합니다.
600은 애니메이션의 지속 시간을 밀리초 단위로 설정한 값이며, easeOutElastic은 애니메이션 효과를 나타냅니다. easeOutElastic은 출발점에서 탄력을 가지며 진행 중에 속도가 감속되는 효과를 나타냅니다.