이미지 슬라이더를 다양한 스타일로 디자인하는 6가지 예제를 제시하겠습니다. 각 예제는 HTML 및 CSS 코드와 함께 주석으로 설명되어 있습니다.
예제 1: 기본 이미지 슬라이더
<!DOCTYPE html>
<html>
<head>
<style>
.slider {
width: 300px;
height: 200px;
overflow: hidden;
}
.slider img {
width: 100%;
height: auto;
transition: transform 0.5s ease-in-out;
}
.slider:hover img {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="slider">
<img src="image1.jpg" alt="Image 1">
</div>
</body>
</html>
이 예제에서는 간단한 이미지 슬라이더를 만듭니다. 마우스 호버 시 이미지가 확대됩니다.
예제 2: 자동 이미지 슬라이더
<!DOCTYPE html>
<html>
<head>
<style>
.slider {
width: 300px;
height: 200px;
overflow: hidden;
}
.slider img {
width: 100%;
height: auto;
transition: transform 0.5s ease-in-out;
}
@keyframes slide {
0% { transform: translateX(0%); }
20% { transform: translateX(0%); }
25% { transform: translateX(-100%); }
45% { transform: translateX(-100%); }
50% { transform: translateX(-200%); }
70% { transform: translateX(-200%); }
75% { transform: translateX(-100%); }
95% { transform: translateX(-100%); }
100% { transform: translateX(0%); }
}
.slider img {
animation: slide 8s linear infinite;
}
</style>
</head>
<body>
<div class="slider">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
</body>
</html>
이 예제에서는 자동으로 이미지가 슬라이드되는 슬라이더를 만듭니다. CSS 애니메이션을 사용하여 이미지가 좌에서 우로 이동하고 무한 반복됩니다.
예제 3: 점 인디케이터 추가
<!DOCTYPE html>
<html>
<head>
<style>
.slider {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.slider img {
width: 100%;
height: auto;
transition: transform 0.5s ease-in-out;
}
.dots {
text-align: center;
position: absolute;
bottom: 10px;
width: 100%;
}
.dot {
display: inline-block;
width: 10px;
height: 10px;
background-color: #3498db;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="slider">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<div class="dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</body>
</html>
이 예제에서는 이미지 슬라이더에 점 인디케이터를 추가합니다. 각 점을 클릭하여 해당 이미지로 이동할 수 있습니다.
예제 4: 페이드 인/아웃 효과
<!DOCTYPE html>
<html>
<head>
<style>
.slider {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.slider img {
width: 100%;
height: auto;
position: absolute;
transition: opacity 0.5s ease-in-out;
}
.slider img.fade-in {
opacity: 1;
z-index: 2;
}
.slider img.fade-out {
opacity: 0;
z-index: 1;
}
</style>
</head>
<body>
<div class="slider">
<img class="fade-in" src="image1.jpg" alt="Image 1">
<img class="fade-out" src="image2.jpg" alt="Image 2">
</div>
</body>
</html>
이 예제에서는 이미지가 페이드 인/아웃되는 슬라이더를 만듭니다. 이미지는 서로 겹쳐지며 투명도가 조절됩니다.
예제 5: 슬라이드 인디케이터 추가
<!DOCTYPE html>
<html>
<head>
<style>
.slider {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.slider img {
width: 100%;
height: auto;
transition: transform 0.5s ease-in-out;
}
.controls {
text-align: center;
position: absolute;
bottom: 10px;
width: 100%;
}
.control {
display: inline-block;
width: 20px;
height: 20px;
background-color: #3498db;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="slider">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<div class="controls">
<span class="control"></span>
<span class="control"></span>
<span class="control"></span>
</div>
</div>
</body>
</html>
이 예제에서는 슬라이드 인디케이터와 함께 이미지 슬라이더를 만듭니다. 각 인디케이터를 클릭하여 해당 이미지로 이동할 수 있습니다.
예제 6: 슬라이드 텍스트 캡션
<!DOCTYPE html>
<html>
<head>
<style>
.slider {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.slider img {
width: 100%;
height: auto;
transition: transform 0.5s ease-in-out;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="slider">
<img src="image1.jpg" alt="Image 1">
<div class="caption">Caption 1</div>
</div>
</body>
</html>
이 예제에서는 이미지 위에 텍스트 캡션을 추가하여 이미지 슬라이더를 만듭니다. 텍스트 캡션은 이미지 아래에 표시됩니다.
'CSS' 카테고리의 다른 글
| 오버레이 효과: 요소에 오버레이(뒷 배경 불투명도) 효과 추가. (0) | 2023.12.23 |
|---|---|
| 푸터 고정: 푸터를 페이지 하단에 고정. (0) | 2023.12.23 |
| 탭 메뉴 스타일링: 탭 메뉴 디자인 커스터마이징. (0) | 2023.12.23 |
| 헤더 및 푸터 스타일링: 웹 페이지의 헤더와 푸터 디자인. (0) | 2023.12.23 |
| 블러 효과: 요소에 블러 효과 추가. (0) | 2023.12.23 |