캐러셀 슬라이드 만들기

body {
  padding: 0;
  margin: 0;
}
.slide {
  width: 100%;
  height: 500px;
  color: #fff;
  font-size: 50px;
  text-align: center;
  line-height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  transition: all 1s ease-in-out;
  transform: scale(0.9);
}

.slide:nth-child(odd) {
  background-color: rgb(255, 188, 255);
}

.slide:nth-child(even) {
  background-color: rgb(168, 213, 255);
}

.showing {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
}

position : absolute 로 슬라이드 위치 동일하게, z-index : 0

 

showing 클래스에 z-index : 1로 설정한뒤 자바스크립트를 이용해 차례로 클래스명을 추가해준다

 

 

	const ShowingClass = "showing";
        const firstSlide = document.querySelector(".slide:first-child");
        function slide() {
            const currentSlide = document.querySelector(`.${ShowingClass}`);
            if (currentSlide) {
                currentSlide.classList.remove(ShowingClass);
                const nextSlide = currentSlide.nextElementSibling;
                if (nextSlide) {
                    nextSlide.classList.add(ShowingClass);
                } else {
                    firstSlide.classList.add(ShowingClass);
                }
            } else {
                firstSlide.classList.add(ShowingClass);
            }
        }
        slide();
        setInterval(slide, 2000);

querySelector는 css속성을 가진다