슬라이드 이펙트5 세로유형 (연속)
전체소스 보러가기
<!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>슬라이드 이펙트05</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 { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img03 bg02 font06">
<header id="header">
<h1>Javascript Slider Effect05</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:ghkddn132@naver.com">ghkddn132@naver.com</a>
</footer>
<!-- footer -->슬라이드 이펙트4 가로유형(연속)에서 slider__inner의 width값을 주어 이미지들이 제대로 가로로 정렬 할수 있게 해주었지만 세로유형(연속)에서는 원래 세로정렬 되어있던 이미지들을 slider__inner에 display: flex, flex-wrap: wrap을 주어 가로정렬 해준것이니 이것을 없애면 알아서 세로로 정렬이 됩니다. 그후 가로정렬에 필요했던 slider__inner의 width과 height 값을 없애줍도록 합니다. 그러면 slider__inner에는 아무것도 남지 않게 됩니다.
javascript
<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 sliderHeight = slider[0].offsetHeight; //이미지의 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사
//복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transform = "translateY(-"+ sliderHeight * currentIndex +"px)";
//마지막 이미지에 위치 했을 떄
if(currentIndex == sliderCount){
setTimeout(() => {
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateY(0px)";
},700);
currentIndex = 0;
}
}
setInterval(sliderEffect,sliderInterval);
</script>우선 이미지 사진의 높이 값을 슬라이드이펙트4와 똑같이 변수에 저장을 해줍니다.
그후 첫번째 이미지 복사를 변수에 저장하고 난 뒤 sliderInner.appendChild(sliderClone);를 사용하여 이미지사진 마지막에 붙여넣어줍니다.
함수하나를 만들어 실행시켜주고 currenIndex++1 해줍니다. 그후 sliderInner선택자에 style.transition를 주고 움직이는 시간을 정해줍니다.그리고 transform로 움직일 다음카드들의 height값의 위치를 알기위해 translateY에 움직여야할 거리를
(- + sliderHeight * currentIndex +px); 로 해줍니다,
그후 조건으로 (currentIndex == sliderCount)일때 sliderInner의 transition과transform울 0으로 만들어 주어, 마지막에이미지(1이미지의 복사)로 갔을때, 눈에는 보이지 않게 바로 처음 이미지로 바꿔줍니다. 그렇게 하면 세로로 계속 반복 하는 슬라이드를 볼수 있습니다.
※GSAP이용하기
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js" ></script>
<script>
//복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
// sliderInner.style.transition = "all 0.6s";
// sliderInner.style.transform = "translateX(-"+ sliderHeight * currentIndex +"px)";
TweenMax.to(sliderInner, {
y : -sliderHeight * currentIndex,
duration : 0.6,
});
//마지막 이미지에 위치 했을 떄
if(currentIndex == sliderCount){
setTimeout(() => {
gsap.to(".slider__inner", {
y : "0",
duration : 0,
});
},700);
currentIndex = 0;
}
}
setInterval(sliderEffect,sliderInterval);
</script>GSAP의 라이브러리를 가져온후
슬라이드 이펙트4에서 한 것과 똑같이 쓰되 높이의 값을 가져오고 세로로 움직여야 하기 때문에 TweenMax.to()를 써서 y축으로 이미지가 있는 높이의 값만큼 준후 조건문이 성립했을때 빠르게 처음이미지로 바뀌게 해주었습니다.
※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>
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
$(".slider__inner").css({
transition: "all 0.6s",
transform: "translateY(-" + sliderHeight * currentIndex + "px)"
});
//마지막 이미지에 위치 했을 떄
if(currentIndex == sliderCount){
setTimeout(() => {
$(".slider__inner").css({
transition: "0s",
transform: "translateY(0px)"
});
},700);
currentIndex = 0;
}
}
setInterval(sliderEffect,sliderInterval);
</script>jQuery의 라이브러리를 가져온후
css를 적용하는 slider__inner를 $로 가져온후 .css를 하고 그안에 적용할 transition과 transform의 값을 적어주면 세로로 슬라이드를 연속으로 하는 이미지가 나옵니다.