이미지 슬라이드다. 하얀색 버튼을 누르면 다음 사진으로 넘어간다. 대충 생각해보면 이미지의 width만큼(검정 테두리의 크기)사이즈를 정해놓고 next 버튼을 누를 때마다 translate 하면 될 거 같다. html은 넘기고 js부터 보자.
const slide = document.querySelector(".img-wrapper")
const slideImages = document.querySelectorAll(".img-wrapper img")
const prevBtn = document.querySelector("#prevBtn")
const nextBtn = document.querySelector("#nextBtn")
const size = slideImages[0].clientWidth
nextBtn.addEventListener("click", function() {
slide.style.transform = "translateX(" + (-size) + "px)"
})
prevBtn.addEventListener("click", function() {
slide.style.tranform = "translateX(" + (-size) + "px)"
})변수 slide는 이미지들을 담고 있는 div이다. 변수 size는 첫 번째 이미지의 가로크기. nextBtn에 클릭 이벤트리스너를 하고 익명함수 만들고 거기에 slide.style.transform을 만든다. 값으로 "translateX(" + (-size) + "px)"을 준다.
조금 지저분하긴 한데 클릭을 하면 오른쪽으로(다음 사진으로) 한 번 움직인다. 계속 움직이기 위해서는 count를 만들어서 곱해줘야 할 것이다.
let cnt = 1;
nextBtn.addEventListener("click", function() {
slide.style.transform = "translateX(" + (-size*cnt) + "px)"
cnt++
})클릭하면 cnt이 올라가고 오른 cnt만큼 size에 곱해준다.
옆으로 열심히 가긴 하는데 사진이 더 이상 없는 빈 공간까지 우주 저멀리 가버리는 문제가 발생했다. 이건 나중에 고치고 일단 prevBtn에도 똑같은 코드를 입력한다.
prevBtn.addEventListener("click", function() {
slide.style.transition = "transform 0.4s ease-in-out";
slide.style.transform = "translateX(" + (-size * cnt) + "px)"
cnt--;
})prevBtn은 왼쪽으로 가야하니까 cnt--를 해주고 부드럽게 움직이라고 transition도 넣어준다. 이제 우주로 뻗어가는 이미지를 막아보자.
nextBtn과 prevBtn모두 cnt를 기준으로 움직인다. 첫 번째 사진에서 cnt는 1이다.prevBtn를 눌렀을 경우 왼쪽으로 가면 cnt는 0이 된다. 즉, cnt가 0보다 작거나 같으면 return해준다. 마찬가지로 nextBtn도 cnt가 이미지들의 length보다 크거나 같으면 return 한다.
이렇게 하면 대략적으로 기능한다. 근데 가끔 에러가 발생한다. next를 눌렀는데 prev로 간다던지 이상한 행동을 보여주는데 강의에 나온 내용으로는 transition이 끝날 때의 transitionend라는 걸 해줘야 한다고 한다.
slide.addEventListener("transitionend", function() {
})이제 여기에 끝없이 슬라이드가 돌아갈 수 있게 시작과 끝을 맞닿게 한다. 즉, 첫 번째 사진과 마지막 사진을 잇는 느낌인데 영상에서는 점프해서 마지막으로 가는 거라고 한다. 첫 번째 사진 뒤에 마지막 사진을 복사해 한 장 더 넣고 id="last"를 준다.
slide.addEventListener("transitionend", function() {
if(slideImage[cnt].id === "last"){
slide.style.transition = "none";
cnt = slideImage.length - 2
})
마찬가지로 마지막 뒤에 첫 번째 사진을 복사해서 넣고 id는 first 라고 한다. 그리고 cnt = sliderImages.length - cnt. 즉, 첫 번째 사진으로 다시 오게 한다. transition을 없애서 마치 나머지 사진들이 재빨리 뒤쪽에 재생성된 것 같은 느낌을 준다.
if (sliderImages[cnt].id === "first") {
slide.style.transition = "none";
cnt = 0;
}
그리고 css에서 overflow:hidden을 주면 된다.
이해 안 감
영상에서는 transitioend 이벤트 리스너 함수 안에 두 개의 if문(id가 last일 때, first일 때)에 각각 slide.style.transform = "translateX(" + (-size * cnt) + "px)" 를 주었는데 이걸 주면 last랑 first에 닿기도 전에 넘어가 버림.
