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: 4800px;
height: 450px;
}
.slider { /*개별 적인 이미지*/
position: relative;
width: 800px;
height: 450px;
}
</style>위 코드는 슬라이더(slider)를 구현하기 위한 CSS 코드입니다. 슬라이더는 이미지를 보여주는 영역과 이미지가 움직이는 영역으로 구성되어 있습니다.
.slider__wrap는 슬라이더 전체를 감싸는 영역으로, 화면 전체를 차지하며 이미지를 수직, 수평 중앙으로 정렬합니다.
.slider__img는 이미지가 보여지는 영역으로, width와 height로 크기를 지정하고, overflow: hidden 속성을 이용하여 이미지가 영역을 벗어나지 않도록 합니다.
.slider__inner는 이미지가 움직이는 영역으로, flexbox를 이용하여 이미지들이 가로 방향으로 나열됩니다. width 속성으로 이미지들의 총 너비를 지정합니다.
.slider는 개별적인 이미지를 감싸는 영역으로, position: relative 속성을 이용하여 내부 요소들을 상대적으로 배치합니다. 이 영역의 크기는 .slider__img와 동일합니다.
HTML
<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>위 코드는 HTML 코드로, 슬라이더를 구현하는데 필요한 구조와 이미지를 포함하고 있습니다.
<main> 태그는 문서의 주요 콘텐츠를 감싸는 태그입니다.
.slider__wrap 클래스는 슬라이더 전체를 감싸는 영역을 지정합니다.
.slider__img 클래스는 이미지가 보여지는 영역을 지정합니다.
.slider__inner 클래스는 이미지가 움직이는 영역을 감싸는 영역으로, 개별 이미지들을 포함합니다.
.slider 클래스는 개별 이미지를 감싸는 영역을 지정합니다. 각각의 클래스는 s1, s2, s3, s4, s5로 지정되어 있으며, 개별 이미지를 식별합니다.
<img> 태그는 이미지를 나타내는 태그로, src 속성으로 이미지 파일의 경로를 지정하고, alt 속성으로 대체 텍스트를 지정합니다.
JAVASCRIPT
<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 sliderCount = slider.length; //이미지 갯수
let sliderInterval =3000; //이미지 변경 간격 시간
let sliderWidth = slider[0].offsetWidth; //이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사
//복사한 첫 번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect() {
currentIndex++;
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";
}
//마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateX(0px)";
}, 700);
currentIndex = 0;
}
setInterval(sliderEffect, sliderInterval);
</script>위 코드는 JavaScript 코드로, 슬라이더의 동작을 구현하는데 필요한 코드입니다.
먼저, 선택자를 통해 HTML 코드에서 필요한 요소들을 가져옵니다.
currentIndex 변수는 현재 보이는 이미지의 인덱스를 저장하고, sliderCount 변수는 이미지의 개수를 저장합니다. sliderWidth 변수는 이미지의 가로 길이를 저장합니다.
sliderClone 변수는 첫 번째 이미지를 복사한 것을 저장합니다. 이후에 이 복사본을 마지막에 붙여넣어 무한루프가 가능하도록 합니다.
sliderEffect 함수는 currentIndex 값을 1씩 증가시키며, 슬라이더 이미지가 좌측으로 움직이도록 transform 속성을 변경합니다.
마지막 이미지에 위치했을 경우, setTimeout 함수를 이용하여 transition 속성을 0초로 변경하여 순간적으로 첫 번째 이미지로 이동하도록 합니다.
마지막으로 setInterval 함수를 이용하여 일정 시간마다 sliderEffect 함수가 실행되도록 합니다.
댓글