이미지 캐러셀 슬라이더를 만드는 간단한 HTML 코드를 제공합니다. 이 코드는 이미지를 자동으로 슬라이드하고 사용자가 직접 제어할 수 있는 슬라이더를 생성합니다.
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>이미지 캐러셀 슬라이더</title>
<style>
/* 슬라이더 스타일 */
.slider-container {
width: 300px;
overflow: hidden;
}
.slider {
display: flex;
animation: slide 5s infinite;
}
.slider img {
width: 100%;
}
@keyframes slide {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-100%); }
50% { transform: translateX(-200%); }
75% { transform: translateX(-300%); }
}
</style>
</head>
<body>
<h1>이미지 캐러셀 슬라이더</h1>
<div class="slider-container">
<div class="slider">
<img src="image1.jpg" alt="이미지 1">
<img src="image2.jpg" alt="이미지 2">
<img src="image3.jpg" alt="이미지 3">
</div>
</div>
</body>
</html>
위 코드에서는 이미지 캐러셀 슬라이더를 만들기 위해 <div> 요소를 사용하고, CSS 스타일을 적용하여 슬라이더를 디자인합니다. @keyframes를 사용하여 이미지가 자동으로 슬라이드되도록 만듭니다.
결과보기
'HTML 예제' 카테고리의 다른 글
| 간단한 레시피 페이지 (1) | 2023.12.08 |
|---|---|
| 드롭다운 메뉴 만들기 (1) | 2023.12.08 |
| 달력 표시 (0) | 2023.12.08 |
| 주식 가격 정보 표시 (1) | 2023.12.08 |
| 사용자 인증 폼 (1) | 2023.12.08 |
