javascriptとCSSで、シンプルなフェードスライドショーをつくってみた

何かとスライドショーの出番は多いわけですが、
巷のプラグインのような機能盛りだくさんはいらなくて、フェード切り替えだけすればいいってものを作ってみました。

<div class="slide-area">
  <div class="show"><img src="xxx.jpg"></div>
  <div><img src="yyy.jpg"></div>
  <div><img src="zzz.jpg"></div>
</div>

.slide-area {
  position: relative;
  margin: 3em 0;
  width: 640px;
  height: 400px;
  overflow: hidden;
}
.slide-area > div {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity .8s ease;
  opacity: 0;
}
.slide-area > div.show {
  opacity: 1;
  z-index: 10;
}
img {
  max-width: 100%;
}

let slideBox = document.querySelector('.slide-area');      
let slideArray = slideBox.children;

const slide = setInterval( slideshow, 5000);

function slideshow() {
  let firstItem = slideBox.firstElementChild;
  firstItem.classList.remove('show');
  slideBox.appendChild(firstItem);
  slideArray[0].classList.add('show');
}

1番目の要素を取って、最後に追加して、フェードはCSSで対応してます。