저번 시간과 비슷하지만 슬라이드 방향이 위로 향하도록 제작 하였습니다.
<!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__inner { /* 이미지 움직이는 영역 */
display: flex;
flex-wrap: wrap;
width: 800px;
height: 2600px; /* 총 이미지 2600px */
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 520px;
}
</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><a href="sliderEffect04.html">4</a></li>
<li class="active"><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:ebmdols@naver.com">ebmdols@naver.com</a>
</footer>
<!-- //footer -->
</body>
</html>이번에는 슬라이드가 윗방향으로 움직여야 하므로 width가 아닌 height 값을 변경해 주어야 합니다.
개별적은 이미지의 height 값을 520px로 변경하였고 움직이는 영역의 총 height 길이를 2600으로 변경해 주었습니다.
<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 sliderInterval = 3000; //이미지 변경되는 시간&간격
let sliderCount = slider.length; //전체 이미지 갯수
let sliderWidth = 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(-"+ sliderWidth * currentIndex +"px)"
// //마지막 이미지에 위치 했을 때
// if(currentIndex == sliderCount){
// setTimeout(() => {
// sliderInner.style.transition = "0s";
// sliderInner.style.transform = "translateY(0px)";
// }, 700);
// currentIndex = 0;
// }
// }
// setInterval(sliderEffect, 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(".slider__inner", {
// y : -(sliderWidth * currentIndex),
// duration : 1,
// });
// //마지막 이미지에 위치 했을 때
// if(currentIndex == sliderCount){
// setTimeout(() => {
// sliderInner.style.transition = "0s";
// sliderInner.style.transform = "translateY(0px)";
// }, 700);
// currentIndex = 0;
// }
// }
// 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>
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({top : (-sliderWidth * currentIndex)}, 600)
//마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
$(sliderInner).css({
"transition" : "0s",
"transform" : "translateY(0px)"
});
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>
슬라이더를 포함하는 클래스가 "slider__wrap"인 컨테이너 요소가 있습니다.
컨테이너 요소 내에 "slider__img" 클래스가 있는 요소가 있습니다. 이는 슬라이더의 보이는 영역을 나타냅니다.
보이는 영역 요소 내에 "slider__inner" 클래스가 있는 요소가 있습니다. 이는 개별 슬라이더 이미지를 보유합니다.
각 슬라이더 이미지는 "slider" 클래스를 가진 요소로 나타냅니다.
첫 번째 슬라이더 이미지는 복제되어 "slider__inner" 내에서 슬라이더 이미지의 끝에 추가됩니다.
이 스크립트는 슬라이더 상태를 추적하기 위해 여러 변수를 정의합니다:
"currentIndex"는 현재 보이는 이미지의 인덱스를 나타냅니다.
"sliderInterval"은 이미지 변경 간격을 나타냅니다.
"sliderCount"는 슬라이더 내 이미지의 총 수를 나타냅니다.
"sliderWidth"는 슬라이더 내 각 이미지의 높이를 나타냅니다.
이 스크립트에는 GSAP, jQuery 및 주석 처리된 vanilla JavaScript 구현 세 가지를 사용하여 슬라이더 효과를 정의합니다. 현재 구현은 jQuery의 animate() 메서드를 사용하여 "slider__inner" 요소의 "top" CSS 속성을 애니메이션화하여 이미지를 수직으로 이동시킵니다.
sliderEffect() 함수는 "currentIndex" 변수를 증가시키고 선택한 애니메이션 라이브러리를 사용하여 "slider__inner" 요소를 이동하여 다음 이미지를 표시합니다. 마지막 이미지를 표시하는 경우 "currentIndex"를 0으로 재설정하고 "slider__inner" 요소를 첫 번째 이미지로 다시 이동시킵니다. 이 함수는 "sliderInterval" 변수를 인터벌 시간으로 사용하여 반복적으로 호출됩니다.