[javascript] 이미지 슬라이더에 이미지에 텍스트 겹쳐서 표시하기

12 Dec 2023

javascript

이미지 슬라이더에 텍스트를 겹쳐 표시하려면 HTML, CSS 및 JavaScript를 사용하여 다음과 같이 구현할 수 있습니다.

1. HTML

<div class="slider-container">
  <div class="slide">
    <img src="image1.jpg" alt="Image 1">
    <div class="text-overlay">텍스트 내용</div>
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Image 2">
    <div class="text-overlay">다른 텍스트 내용</div>
  </div>
  <!-- 추가적인 슬라이드들 -->
</div>

2. CSS

.slider-container {
  position: relative;
}
.slide {
  position: relative;
}
.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5); /* 투명한 배경색 */
  color: #ffffff; /* 텍스트 색상 */
  padding: 10px 20px; /* 원하는 스타일에 맞게 조정 */
}

3. JavaScript

일반적으로 슬라이더 라이브러리(예: Swiper, Slick 등)를 사용할 수 있으며, 해당 라이브러리의 문서를 참조하여 이미지 슬라이더에 텍스트를 추가하는 방법에 대해 알아보세요.

이제, 이미지 슬라이더에 텍스트를 겹쳐서 표시하는 방법을 사용해 보시기 바랍니다.