간단한 이미지 슬라이더를 만드는 HTML 코드를 제공합니다. 사용자가 좌우 화살표를 클릭하여 이미지를 전환할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>간단한 이미지 슬라이더</title>
<style>
/* 슬라이더 스타일 */
.slider-container {
width: 400px;
overflow: hidden;
position: relative;
}
.slider {
display: flex;
transition: transform 0.5s ease;
}
.slider img {
width: 100%;
height: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.5);
}
.prev {
left: 0;
}
.next {
right: 0;
}
</style>
</head>
<body>
<h1>간단한 이미지 슬라이더</h1>
<!-- 슬라이더 컨테이너 -->
<div class="slider-container">
<div class="slider">
<img src="img1.jpg" alt="이미지 1">
<img src="img2.jpg" alt="이미지 2">
<img src="img3.jpg" alt="이미지 3">
<!-- 필요한 만큼 이미지 추가 -->
</div>
</div>
<!-- 이전 및 다음 버튼 -->
<div class="prev" onclick="prevSlide()">❮</div>
<div class="next" onclick="nextSlide()">❯</div>
<script>
var slideIndex = 0;
// 초기 슬라이더 표시
showSlide(slideIndex);
// 이전 이미지 표시
function prevSlide() {
showSlide(slideIndex -= 1);
}
// 다음 이미지 표시
function nextSlide() {
showSlide(slideIndex += 1);
}
// 특정 이미지 표시
function showSlide(index) {
var slides = document.querySelectorAll(".slider img");
if (index >= slides.length) { slideIndex = 0 }
if (index < 0) { slideIndex = slides.length - 1 }
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex].style.display = "block";
}
</script>
</body>
</html>
결과보기
옆 양 사이드 꺽세를 누르면 이미지가 바뀝니다.
'HTML 예제' 카테고리의 다른 글
| CSS 애니메이션 사용 (0) | 2023.12.07 |
|---|---|
| 화면에 특수 효과 추가 (0) | 2023.12.07 |
| 사용자 입력을 그래프로 표시 (0) | 2023.12.07 |
| 마우스 오버 이벤트 (0) | 2023.12.07 |
| 사진 갤러리 만들기 (0) | 2023.12.07 |
