슬라이드 이펙트 사용해보기 ( 4 ) 좌 슬라이드 연속성 GSAP, jQuery
슬라이드 이펙트를 이용해 사진이 좌로 무한 슬라이드 하는 사이트를 만들어 보겠습니다.
VSCode
<!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>슬라이드 이펙트4</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;
height: 450px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img07 bg02 font05">
<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-->
<footer id="footer">
<a href="mailto:ehcjswo1@gmail.com">ehcjswo1@gmail.com</a>
</footer>
<!-- //footer-->
<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; //이미지 변경 간격 시간
let sliderWidth = slider[0].offsetWidth; //이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사
//첫 번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEfeect(){
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(sliderEfeect, sliderInterval);
</script>
<!-- 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.set(sliderInner, {x: 0});
currentIndex = 0;
},700);
}
}
setInterval(sliderEffect, sliderInterval);
</script> -->
<!-- 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(()=>{
sliderInner.appendChild(sliderClone);
currentIndex++
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({left : -sliderWidth * currentIndex}, 600);
if (currentIndex === sliderCount) {
setTimeout(() => {
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({left : 0}, 0);
currentIndex = 0;
}, 700);
}
}, sliderInterval);
</script> -->
</body>
</html>이미지 크기값이 바뀔 수 있으니 sliderWidth 라는 변수를 만들었습니다.
slider[0].offsetWidth : slider[0]의 width값을 가져 옵니다.
슬라이드를 끊기지 않고 돌려야 하기 때문에 첫사진을 맨 뒷사진 다음에 나오게 하기 위해
sliderClone 변수를 만들었습니다.
sliderInner.firstElementChild.cloneNode(true): 첫번째 이미지를 복사합니다.
sliderInner.appendChild(sliderClone);sliderInner 맨 뒤에 복사한 사진을 추가 해줍니다.
javascrtip
<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; //이미지 변경 간격 시간
let sliderWidth = slider[0].offsetWidth; //이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사
//첫 번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone); //맨 뒤에 복사한 사진 추가
function sliderEfeect(){
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(sliderEfeect, sliderInterval);
</script>setInterval() 함수는 일정한 간격으로 함수를 반복 실행하는 함수입니다. 이 코드에서는 sliderInterval 변수에 저장된 시간 간격으로 currentIndex와 sliderInner 요소를 조작하여 이미지 슬라이더를 구현합니다.
sliderEffect 함수는 setInterval 메서드를 사용하여 일정 시간마다 실행됩니다. 이 함수는 현재 인덱스를 증가시키고, transform 속성을 사용하여 슬라이드 쇼 이미지를 좌측으로 이동시킵니다. 만약 마지막 이미지까지 이동하면, setTimeout 메서드를 사용하여 0.7초 후에 첫번째 이미지로 이동하도록 구현합니다.
setInterval 메서드를 사용하여 일정 시간마다 sliderEffect 함수를 반복 호출하여 슬라이드 쇼가 지속적으로 동작하도록 구현합니다.
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.set(sliderInner, {x: 0});
currentIndex = 0;
},700);
}
}
setInterval(sliderEffect, sliderInterval);
</script>
이미지 슬라이더의 설정값들을 설정해줍니다. currentIndex는 현재 보이는 이미지의 인덱스를, sliderCount는 전체 이미지의 개수를, sliderInterval은 이미지 전환 간격 시간을, sliderWidth는 개별 이미지의 가로 길이를 나타냅니다.
이미지 슬라이더의 효과를 적용하는 sliderEffect 함수에서는, GSAP 라이브러리에서 제공하는 to 메소드를 사용하여 sliderInner 요소의 x 속성을 변경합니다. 이 때, duration 속성으로 애니메이션의 지속 시간을, x 속성으로 이동할 거리를 설정합니다.
마지막으로, 이미지 슬라이더가 마지막 이미지에 위치했을 때 초기화하는 코드를 추가합니다. setTimeout 함수를 사용하여 0.7초 후에 set 메소드를 사용하여 sliderInner 요소의 x 속성을 0으로 초기화하고, currentIndex를 0으로 재설정합니다. 이렇게 함으로써 이미지 슬라이더가 무한 반복되도록 구현할 수 있습니다. 마지막으로, setInterval 함수를 사용하여 sliderEffect 함수를 주기적으로 호출하여 이미지가 일정한 간격으로 전환되도록 합니다.
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(()=>{
sliderInner.appendChild(sliderClone);
currentIndex++
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({left : -sliderWidth * currentIndex}, 600);
if (currentIndex === sliderCount) {
setTimeout(() => {
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({left : 0}, 0);
currentIndex = 0;
}, 700);
}
}, sliderInterval);
</script>setInterval() 함수를 사용하여 일정한 간격으로 이미지를 변경하고 있습니다. 이 함수는 일정한 간격으로 코드 블록을 반복 실행합니다.
그리고, sliderInner에 sliderClone을 추가하고, currentIndex를 1 증가시킵니다. 이렇게 하면 슬라이더가 오른쪽으로 이동합니다.
다음으로, jQuery의 animate() 함수를 사용하여 sliderInner 요소를 왼쪽으로 이동합니다. 이 함수는 첫 번째 매개 변수로 CSS 속성을 지정하고, 두 번째 매개 변수로 애니메이션 시간을 지정합니다.
마지막으로, currentIndex가 슬라이더 이미지 수와 같아지면, setTimeout() 함수를 사용하여 이미지를 초기 위치로 되돌립니다. 이 함수는 첫 번째 매개 변수로 실행할 함수를 지정하고, 두 번째 매개 변수로 지연 시간을 지정합니다.