[go] 이미지 슬라이드쇼

15 Dec 2023

이미지 슬라이드쇼는 여러 이미지를 자동으로 전환하여 보여주는 기능으로, 웹사이트나 애플리케이션에서 많이 활용됩니다.

HTML 구조

먼저, HTML에서 이미지 슬라이드쇼를 구현하기 위한 기본적인 구조를 작성해야 합니다. 아래는 간단한 HTML 구조입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>이미지 슬라이드쇼</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="slideshow-container">
    <div class="slides">
      <img src="image1.jpg" alt="이미지 1">
      <img src="image2.jpg" alt="이미지 2">
      <img src="image3.jpg" alt="이미지 3">
    </div>
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>
  </div>
</body>
</html>

CSS 스타일링

다음으로, 슬라이드쇼 컨테이너와 이미지들을 스타일링하는 CSS 코드를 작성해야 합니다. 아래는 간단한 CSS 코드입니다.

* {box-sizing: border-box;}
.slideshow-container {
  position: relative;
  max-width: 1000px;
  margin: auto;
}
.slides img {
  display: none;
  width: 100%;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
.prev {
  left: 0;
}
.next {
  right: 0;
}

JavaScript 함수

마지막으로, JavaScript를 사용하여 이미지 전환 기능을 추가해야 합니다. 아래는 간단한 JavaScript 함수입니다.

var slideIndex = 1;

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

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slides");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "block";  
}

이제 위의 코드를 조합하여 이미지 슬라이드쇼를 구현할 수 있습니다. 만약, 더 많은 기능이나 디자인을 원한다면 여기에 추가해 보세요!