728x90
Slider Effect4
이번에는 슬라이드 효과가 연속적으로 부드럽게 넘겨지도록 만들어보겠습니다.
코드블럭
<!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>마우스이펙트</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="img06 bg06 font02">
<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="이미지6"></div>
<div class="slider s2"><img src="img/sliderEffect07-min.jpg" alt="이미지7"></div>
<div class="slider s3"><img src="img/sliderEffect08-min.jpg" alt="이미지8"></div>
<div class="slider s4"><img src="img/sliderEffect09-min.jpg" alt="이미지9"></div>
<div class="slider s5"><img src="img/sliderEffect10-min.jpg" alt="이미지10"></div>
</div>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:lee3ll@naver.com">lee3ll@naver.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 = 2000; //이미지 변경 간격시간(3초)
let sliderWidth = slider[0].offsetWidth; //이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사
//복사한 첫 번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
</script>
<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.transition = "translateX(0px)"
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>보충설명
✨ HTML 문서 내 ".slider__wrap" 클래스를 가진 요소를 선택하여 sliderWrap 변수에 할당하고, 이하 동일한 방식으로 필요한 요소들을 선택하여 변수에 할당합니다.
✨ 슬라이더의 동작을 제어하는 함수인 sliderEffect() 함수를 선언합니다. 이 함수는 현재 이미지 인덱스currentIndex를 1 증가시키고, 선택된 이미지의 영역sliderInner에 대해 translateX() 속성을 이용하여 이동합니다.
✨ 조건문에서는 만약 마지막 이미지에 위치했다면, 현재 위치를 초기화하고 애니메이션 효과를 끄기 위해 일정 시간(0.7초)을 기다린 후, translateX() 값을 0으로 설정하여 첫 번째 이미지로 이동시킵니다.
✨ 마지막으로 setInterval() 함수를 이용하여 sliderEffect() 함수를 일정한 시간 간격으로 반복 실행합니다. 이때 sliderInterval 변수에 저장된 시간(3초)만큼 간격을 두고 실행됩니다.
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, {
x : -sliderWidth * currentIndex,
duration : 0.5,
ease : "power.out"
});
if(currentIndex == sliderCount){
setTimeout(() => {
gsap.to(sliderInner, {
x : 0,
duration : 0,
ease : "power.out"
});
}, 700);
currentIndex = 0;
};
};
setInterval(sliderEffect, sliderInterval);
</script>
jQuery이용하기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/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}, 500);
if(currentIndex == sliderCount){
setTimeout(() => {
$(".slider__inner").animate({left : 0}, 0);
}, 700);
currentIndex = 0;
};
};
setInterval(sliderEffect, sliderInterval);
</script>