<div id="slider">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
    <div class="item item-4"></div>
    <div class="item item-5"></div>
  </div>



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#slider {
  position: relative;
  width: 100%;
}

#slider .item {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 500px;

  top: 0;
  left: 0;

  opacity: 0;

  transition: all 0.5s ease-in-out; /* 느리게 빠르게 느리게 */
  transform: scale(0.9);

  z-index: 0;
}

#slider .item.show {
  opacity: 1;
  z-index: 10;
  transform: scale(1);
}

.item-1 {
  background-color: lightblue;
}

.item-2 {
  background-color: lightyellow;
}

.item-3 {
  background-color: lightgreen;
}

.item-4 {
  background-color: lightpink;
}

.item-5 {
  background-color: mediumpurple;
}



var firstSlide = document.querySelector('.item:first-child');

function slide() {
  var currentSlide = document.querySelector('.show');

  if(currentSlide) {
    currentSlide.classList.remove('show');
  
    var nextSlide = currentSlide.nextElementSibling;

    // 마지막 슬라이드까지 갔을 때 다음이 있는지를 따져줘야 함
    if(nextSlide) {
      nextSlide.classList.add('show');
    } else {
      firstSlide.classList.add('show');
    }

  } else {
    firstSlide.classList.add('show')
  }
}

slide(); // 최초 한 번 호출해서 첫 슬라이드에 show를 적용시켜야 함
setInterval(slide, 2000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.