이미지 슬라이드 - 연속적으로 넘기기
<section id="sliderType03">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider"><img src="img/images06.jpg" alt="이미지1"></div>
<div class="slider"><img src="img/images07.jpg" alt="이미지2"></div>
<div class="slider"><img src="img/images08.jpg" alt="이미지3"></div>
<div class="slider"><img src="img/images09.jpg" alt="이미지4"></div>
<div class="slider"><img src="img/images10.jpg" alt="이미지5"></div>
</div>
</div>
</div>
</section>.slider__wrap {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.slider__img { /*화면 보이는 구간 */
width: 800px;
height: 480px;
overflow: hidden; /* overflow가 없다면 전체가 보임*/
}
.slider__inner { /* 이미지 움직이는 영역 */
display: flex;
width: 4800px; /* 이미지 총 길이 */
transform: translateX(0);
}
/* position: relative를 쓰는 이유: 1. position:absolute의 기준점을 잡을 때 / 2. float:left를 주고 싶을 때 */
.slider {
width: 800px;
position: relative;
}
.slider::before {
position: absolute;
left: 5px;top: 5px;
background: rgba(0,0,0,0.4);
color: #fff;
padding: 5px 10px 3px;
}
.slider:nth-child(1):before {content: '이미지1';}
.slider:nth-child(2):before {content: '이미지2';}
.slider:nth-child(3):before {content: '이미지3';}
.slider:nth-child(4):before {content: '이미지4';}
.slider:nth-child(5):before {content: '이미지5';}
.slider:nth-child(6):before {content: '이미지1';}const sliderWrap = document.querySelector(".slider__wrap")
const sliderImg = document.querySelector(".slider__img") //이미지 한칸만 움직이는 영역
const sliderInner = document.querySelector(".slider__inner") //이미지 움직이는 영역
const slider = document.querySelectorAll(".slider") //각각의 이미지
let currentIndex = 0;
let sliderCount = slider.length; //이미지 갯수
let sliderWidth = sliderImg.offsetWidth; //offsetWidth : 패딩 마진 값 빼줌
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫 번째 이미지 복사
sliderInner.appendChild(sliderClone); //첫 번째 이미지를 마지막에 넣어 줌
console.log(sliderWidth);
function sliderEffect(){
currentIndex++;
sliderInner.style.transition = "all 0.3s"
sliderInner.style.transform = "translateX(-" + sliderWidth * currentIndex + "px)"
//currentIndex = 0 1 2 3 4 0 1 2 3 4 0 .....
// if(currentIndex % 5 % 2 == 0 ) console.log(currentIndex % 5);
//마지막 사진에 갔을 때
if(currentIndex == 5){
setTimeout(() => {
sliderInner.style.transition = "0s"
sliderInner.style.transform = "translateX(0px)"
}, 300);
currentIndex = 0;
}
}
setInterval(sliderEffect, 1000);공사중입니다.