[JS] 자동 슬라이드 캐러셀 구현하기

 

 

 

애를 많이 먹었던 자동 슬라이드 구현을 미리 적어두려고 한다.

 

이미지가 옆으로 넘어가는 슬라이드 구현을 위해 float:left를 적용했지만 좌측으로 넘어가지 않았다.

이미지가 들어가는 부모 영역을 벗어나는 경우 그 옆으로 가지 않고, 아래로 내려갔다.
부모 영역의 width를 증가시키면 그만큼 너비가 넓어져, 보이지 않아야 하는 다른 이미지들이 모두 옆으로 밀렸다.

이를 위해서 overflow:hidden을 적용해도 이상하게 사라지지 않았다.

여러 사이트를 돌고 돌아 결국 맞는 방법을 알아냈다. 하단 참조에 있는 두 블로그를 참고하였다. 여러 사이트를 찾고, 구글링을 해보았지만 결과적으로 도움이 되었던 곳은 참고에 있는 블로그였다. 코드의 자세한 설명은 블로그를 통해 볼 수 있다.

 

 

HTML

<div class="main-slide">
	<div class="slider">
		<div class="slide-box">
			<img src="./image/slide1.jpg">
        </div>
        <div class="slide-box">
			<img src="./image/slide2.jpg">
        </div>
        <div class="slide-box">
			<img src="./image/slide3.jpg">
        </div>
        <div class="slide-box">
			<img src="./image/slide4.jpg">
        </div>
	</div>
</div>

 

 

CSS

.main-slide {
    overflow: hidden;
    position: absolute;
    width: 100%;
}
.slider {
    display: flex;
    width: 100%;
}
.slider-box > img {
    object-fit: cover;
    width: 100%;
}

 

 

Script

const CAROUSEL_LENGTH = document.querySelectorAll(".slide-box").length - 1;
let current = 0;

const $carousel = document.querySelector(".slider");

const slideEvent = () => {
	if (current !== (CAROUSEL_LENGTH + 1)) {
		$carousel.style.transform = `translateX(${(current + 1) * -100}%)`;
		$carousel.style.transitionDuration = '500ms';
        current++;
	} else {
		current = 0;
		$carousel.style.transform = `translateX(0px)`;
	}
};

setInterval(slideEvent, 1500);

 

 

먼저 캐러셀을 나타낼 수 있도록 배치하는 데 제일 오랜 시간이 걸렸다. 이미지가 제대로 배치 되지 않으니 스크립트가 동작하는지 확인 조차 못하는 상황이었다. slick slider를 사용하려고 했지만 이 마저도 실패로 돌아갔다. 

 

display와 float, position 등 여러 값을 조정하며 확인했고, 제일 큰 차이점은 float:left가 아닌 display:flex를 사용하는 것이었다.  왜 float:left가 적용되지 않았는지는 다시 알아봐야 할 숙제로 남았다.

 

 

---

 

 

reference

"자바스크립트로 자동 슬라이드 구현하기", Jinny, https://hyojinny.tistory.com/274
"[JS] 자바스크립트로 캐러셀(Carousel)구조 구현하기",eun's front-end, https://velog.io/@xnelb013/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EC%BA%90%EB%9F%AC%EC%85%80Carousel%EA%B5%AC%EC%A1%B0-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0