728x90
반응형
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 { /*이미지 움직이는 영역 */
height: 450px;
width: 4800px; /*이미지의 총 길이 4800*/
}
.slider { /*개별적인 이미지*/
position: relative;
width: 800px;
height: 450px;
}
</style>
HTML
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider s1"><img src="./img/sliderEffect06.jpg" alt="이미지1"></div>
<div class="slider s2"><img src="./img/sliderEffect07.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="./img/sliderEffect08.jpg" alt="이미지3"></div>
<div class="slider s4"><img src="./img/sliderEffect09.jpg" alt="이미지4"></div>
<div class="slider s5"><img src="./img/sliderEffect10.jpg" alt="이미지5"></div>
</div>
</div>
</div>
</main>
<!--main-->
slider__inne부분에서 이미지를 각각 나눠주고 마지막 사진에서 다시 1번으로 돌아오기 위해 class 명에 s1,s2...를 붙여 주었습니다.
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 sliderWidth = slider[0].offsetHeight; //이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true);
let sliderInterval = 2000;
//복사한 첫 번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
좌우로 움직이던 슬라이드 이펙트의 선택자와 다름이 없으나 바꾸어야할 것이 하나 있습니다. offsetWidth가 아닌 offsetHeight 입니다.
위아래로 움직여주기 위한 것이기 때문에 offsetHeight를 사용합니다.
offsetHeight
offsetHeight는 HTML 요소의 높이를 나타내는 속성입니다. 이 속성은 해당 요소의 경계 상자(border box)의 높이를 포함하여 padding, border, 그리고 element의 높이를 합한 값을 반환합니다.
javascript
<script>
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>