자바스크립트를 사용해 간단하게 이미지를 슬라이드 구현하는 방법을 알아보겠습니다. 아래 예제는 HTML, CSS,Javascript를 사용해 기본적인 이미지 슬라이드 쇼를 만드는 방법을 알 수 있습니다.
1. HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slide</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slider">
<div class="slides">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
</div>
<button class="prev" onClick="changeSlide(-1)">𘛾</button>
<button class="next" onClick="changeSlide(-1)">𘛾</button>
</div>
<script src="slide.js"></script>
</body>
</html>2.CSS (style.css)
* {
box-sizing: border-box;
}
body {
margin: 0;
padding:0;
display:flex;
justify-content: center; /* 중앙 정렬 */
align-items: center; /* 중앙 정렬 */
height: 100vh; /* 화면 높이 전체 사용 */
background-color: #f0f0f0;
}
.slider {
position:relative;
max-width: 600px;
width:100%;
height: 300px;
margin: auto;
overflow: hidden;
border-radius: 10px; /* 슬라이더 둥글게 */
}
.slides {
display:flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width:100%;
height: 100%;
overflow: hidden;
display:flex;
justify-content: center;
align-items: center;
background-position: center;
}
.slides img {
width:auto;
height:100%;
max-width: none;
object-fit: cover;
}
button {
position:absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255,255,255,0.7);
border:none;
cursor:pointer;
padding: 10px;
font-size: 18px;
z-index: 1;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}3. Javscript 구조(slide.js)
let currentSlide = 0;
const slides = document.querySelectorAll('.slides img');
const totalSlides = slides.length;
let isDragging = false;
let startX, endX;
function showSlide(index) {
if (index >= totalSlides) {
currentSlide = 0;
} else if (index < 0) {
currentSlide = slides.length - 1;
} else {
currentSlide = index;
}
const offset = -currentSlide * 100; // 슬라이드 너비 비율
document.querySelector('.slides').style.transform = `translateX(${offset}%)`;
}
function changeSlide(direction) {
showSlide(currentSlide + direction);
}
// 자동 슬라이드 옵션
setInterval(() => {
changeSlide(1)
}, 3000) // 3초마드 슬라이드
// 마우스 드래그 기능 추가
document.querySelector('.slider').addEventListener('mousedown', (event) => {
isDragging = true;
startX = event.pageX;
})
document.addEventListener('mouseup', () =>{
isDragging = false;
})
document.addEventListener('mousemove', (event) => {
if (!isDragging) return;
endX = event.pageX;
if(startX - endX > 50) {
changeSlide(1); // 왼쪽으로 드래그시 다음 슬라이드
isDragging = false; // 드래그 종료
} else if (endX - startX > 50) {
changeSlide(-1);
isDragging = false;
}
})
document.querySelector('.slider').addEventListener('dragstart', (event) => {
event.preventDefault(); // 드래그로 이미지 뽑기 방지
})
LIST
'Front-End > JavaScript' 카테고리의 다른 글
| [Javascript] Jest란 ? (0) | 2025.02.25 |
|---|---|
| [Javascript] Javascript 호이스팅이란? (0) | 2025.02.17 |
| [Javascript] 14강 Javascript의 프로토타입 객체 (1) | 2025.02.15 |
| [Javascript] 13강 자바스크립트 모듈 (0) | 2025.02.13 |
| [Javascript] 12강 반복기와 생성기 (0) | 2025.02.10 |