연습장:Sakura/1 문서 원본 보기

<html>
<div class="slideshow-container">
  <div class="slideshow">
    <img src="/w/images/4/44/사토_에이사쿠.jpg">
    <img src="/w/images/3/3e/아베_신조.jpg">
    <img src="/w/images/c/c7/고이즈미_준이치로.jpg">
  </div>
</div>

<button class="prev" onclick="plusSlides(-1)">❮</button>
<button class="next" onclick="plusSlides(1)">❯</button>
<style>
.slideshow-container {
  position: relative;
  overflow: hidden;
}

.slideshow {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slideshow img {
  width: 100%;
  height: auto;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 16px;
  background-color: black;
  color: white;
  font-size: 24px;
  border: none;
  cursor: pointer;
  z-index: 1;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}
</style>
<script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {
  const slides = document.querySelectorAll('.slideshow img');
  const numSlides = slides.length;
  if (n > numSlides) { slideIndex = 1; }
  if (n < 1) { slideIndex = numSlides; }
  const offset = (slideIndex - 1) * -100;
  document.querySelector('.slideshow').style.transform = `translateX(${offset}%)`;
}
</script>
</html>