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-->
script
<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].offsetWidth; //이미지 가로 값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫 번째 이미지 복사 cloneNode(true)를 하먄 1번이 맨 뒤로 들어감
//복사한 첫 번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
</script>
<script>
let sliderInterval = 3000;
function sliderEffect(){
currentIndex++;
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex + "px)";