📖
이미지 페이드 인/아웃 무한 반복
페이지 정보
본문
✅ 주요 기능 요약:
자동 페이드 슬라이드 (3초 간격)
16:9 비율 유지
제목은 이미지 위 하단에 overlay
제목은 2줄까지만 보이고 넘치면 ...
✅ 전체 소스<!DOCTYPE html>
[code]<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지 페이드 슬라이더</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.slider-container {
position: relative;
width: 300px;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide.active {
opacity: 1;
z-index: 1;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.caption {
position: absolute;
bottom: 0;
width: 100%;
padding: 8px;
background: rgba(0, 0, 0, 0.5);
color: white;
font-size: 14px;
line-height: 1.2em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slide active">
<img src="https://via.placeholder.com/300x169/FF5733/FFFFFF?text=1" alt="Slide 1">
<div class="caption">첫 번째 이미지입니다. 아주 긴 제목이 들어가도 말줄임 표시가 됩니다.</div>
</div>
<div class="slide">
<img src="https://via.placeholder.com/300x169/33C1FF/FFFFFF?text=2" alt="Slide 2">
<div class="caption">두 번째 이미지 제목</div>
</div>
<div class="slide">
<img src="https://via.placeholder.com/300x169/75FF33/000000?text=3" alt="Slide 3">
<div class="caption">세 번째 이미지 제목입니다</div>
</div>
<div class="slide">
<img src="https://via.placeholder.com/300x169/FF33A6/FFFFFF?text=4" alt="Slide 4">
<div class="caption">네 번째 제목도 아주 길 수 있어요! 그래서 두 줄로 말줄임 합니다.</div>
</div>
<div class="slide">
<img src="https://via.placeholder.com/300x169/FFC300/000000?text=5" alt="Slide 5">
<div class="caption">다섯 번째 제목</div>
</div>
</div>
<script>
const slides = document.querySelectorAll('.slide');
let current = 0;
setInterval(() => {
slides[current].classList.remove('active');
current = (current + 1) % slides.length;
slides[current].classList.add('active');
}, 3000); // 3초 간격
</script>
</body>
</html>[/code]✅ 사용 팁
이미지는 https://via.placeholder.com를 예시로 넣었으니, 원하시는 이미지 URL로 변경하시면 됩니다.
텍스트 길이는 자유롭게 조정하되, 2줄 넘으면 자동으로 ... 처리됩니다.
슬라이드 간 간격이나 페이드 속도는 setInterval() 및 transition 속성으로 조절 가능합니다.
자동 페이드 슬라이드 (3초 간격)
16:9 비율 유지
제목은 이미지 위 하단에 overlay
제목은 2줄까지만 보이고 넘치면 ...
✅ 전체 소스<!DOCTYPE html>
[code]<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지 페이드 슬라이더</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.slider-container {
position: relative;
width: 300px;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide.active {
opacity: 1;
z-index: 1;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.caption {
position: absolute;
bottom: 0;
width: 100%;
padding: 8px;
background: rgba(0, 0, 0, 0.5);
color: white;
font-size: 14px;
line-height: 1.2em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slide active">
<img src="https://via.placeholder.com/300x169/FF5733/FFFFFF?text=1" alt="Slide 1">
<div class="caption">첫 번째 이미지입니다. 아주 긴 제목이 들어가도 말줄임 표시가 됩니다.</div>
</div>
<div class="slide">
<img src="https://via.placeholder.com/300x169/33C1FF/FFFFFF?text=2" alt="Slide 2">
<div class="caption">두 번째 이미지 제목</div>
</div>
<div class="slide">
<img src="https://via.placeholder.com/300x169/75FF33/000000?text=3" alt="Slide 3">
<div class="caption">세 번째 이미지 제목입니다</div>
</div>
<div class="slide">
<img src="https://via.placeholder.com/300x169/FF33A6/FFFFFF?text=4" alt="Slide 4">
<div class="caption">네 번째 제목도 아주 길 수 있어요! 그래서 두 줄로 말줄임 합니다.</div>
</div>
<div class="slide">
<img src="https://via.placeholder.com/300x169/FFC300/000000?text=5" alt="Slide 5">
<div class="caption">다섯 번째 제목</div>
</div>
</div>
<script>
const slides = document.querySelectorAll('.slide');
let current = 0;
setInterval(() => {
slides[current].classList.remove('active');
current = (current + 1) % slides.length;
slides[current].classList.add('active');
}, 3000); // 3초 간격
</script>
</body>
</html>[/code]✅ 사용 팁
이미지는 https://via.placeholder.com를 예시로 넣었으니, 원하시는 이미지 URL로 변경하시면 됩니다.
텍스트 길이는 자유롭게 조정하되, 2줄 넘으면 자동으로 ... 처리됩니다.
슬라이드 간 간격이나 페이드 속도는 setInterval() 및 transition 속성으로 조절 가능합니다.
댓글목록
등록된 댓글이 없습니다.
  |