이미지가 자동으로 자연스럽게 왼쪽 방향으로 슬라이드 되는 것처럼 보이는 효과입니다.
<!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; /* 총 이미지 4800px */
height: 450px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img01 bg01 font01">
<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/sliderEffect06-min.jpg" alt="이미지1"></div>
<div class="slider s2"><img src="./img/sliderEffect07-min.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="./img/sliderEffect08-min.jpg" alt="이미지3"></div>
<div class="slider s4"><img src="./img/sliderEffect09-min.jpg" alt="이미지4"></div>
<div class="slider s5"><img src="./img/sliderEffect10-min.jpg" alt="이미지5"></div>
</div>
</div>
</div>
</main>
<!-- //main -->
</body>
</html>구성은 저번 시간과 비슷하지만 움직이는 영역 부분의 총 width 값을 불러와야 하기 때문에 4800px로 변경해 주었습니다.
마지막 이미지를 복사하여 앞으로 불러와주는 형식입니다.
<script>
//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img"); //보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); //개별 이미지
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //전체 이미지 갯수
let sliderInterval = 3000; //이미지 변경되는 시간&간격
</script>
<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)";
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>sliderInner 요소에 sliderClone 요소를 추가한 후, sliderEffect 함수를 setInterval 함수를 사용하여 일정 시간 간격으로 실행합니다. sliderEffect 함수는 슬라이드를 이동시키는 역할을 합니다.
currentIndex 변수는 현재 보여지고 있는 슬라이드의 인덱스를 저장하며, 이 값이 증가함에 따라 슬라이드가 이동합니다.
sliderInner 요소의 transition 속성과 transform 속성을 변경하여 슬라이드를 이동시키며, if문을 사용하여 마지막 이미지에 위치했을 때 슬라이드를 처음 상태로 돌립니다.
setInterval 함수는 sliderInterval 변수에 지정된 시간 간격으로 sliderEffect 함수를 실행합니다. 따라서 sliderInterval 변수의 값을 조정하여 슬라이드 전환 간격을 조절할 수 있습니다.
appendChild()
appendChild() 메서드는 부모 요소에 자식 요소를 추가할 때 사용하는 메서드입니다. 새로운 자식 요소를 만들어 createElement() 메서드로 생성한 후, appendChild() 메서드를 사용하여 부모 요소에 추가할 수 있습니다. 이를 통해 DOM을 동적으로 조작하여 웹 페이지의 모양과 동작을 변경할 수 있습니다.
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(".slider__inner", {
x : -(sliderWidth * currentIndex),
duration : 1,
});
//마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateX(0px)";
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);GSAP 라이브러리를 사용하여 구현한 슬라이더입니다.
sliderInner 변수는 슬라이더의 이미지들을 감싸는 부모 요소를 참조하고, sliderClone 변수는 첫 번째 이미지를 복제한 것입니다. 슬라이더의 효과는 sliderEffect 함수에서 구현되며, 해당 함수는 setInterval 함수를 통해 일정 시간마다 반복 실행됩니다.
sliderEffect 함수 내부에서는 currentIndex 변수를 증가시키면서 gsap.to 함수를 사용하여 슬라이더의 위치를 변경합니다. GSAP 라이브러리의 to 함수는 첫 번째 인자로 대상 요소를 지정하고, 두 번째 인자로는 속성과 값들을 객체 형태로 전달합니다. 이 경우 x 속성을 사용하여 x축 방향으로 이동하도록 설정하고, duration 속성을 사용하여 이동하는 시간을 1초로 설정합니다.
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>
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({left : (-sliderWidth * currentIndex)}, 600)
//마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
$(sliderInner).css({
"transition" : "0s",
"transform" : "translateX(0px)"
});
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>위에서는 setTimeout() 함수를 사용해 일정 시간이 지난 후에 transition 속성을 0초로 바꾸는 방식으로 슬라이더가 마지막 이미지에 위치했을 때의 처리를 구현했습니다. 반면에 두번째 코드에서는 jQuery의 css() 메소드를 이용해 transition과 transform 속성 값을 변경해서 같은 효과를 구현했습니다.