반응형
[Html & CSS] 초간단 자동으로 움직이는 사진 슬라이드 예시 코드 !!
안녕하세요. 자동으로 사진이 움직이는 슬라이드 예시 입니다 ㅎ
참고하셔서 사용하시면 됩니다 :)
예제코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.slider {
width: 240px; /* 슬라이더의 너비 */
height: 300px; /* 슬라이더의 높이 */
overflow: hidden; /* 이미지가 박스 바깥으로 나가지 않도록 함 */
position: relative; /* 슬라이드 위치 조정을 위함 */
}
.slides {
width: 100%; /* 부모 요소와 동일한 너비 */
height: 100%; /* 부모 요소와 동일한 높이 */
display: flex; /* 이미지를 가로로 나열 */
transition: transform 0.5s ease-in-out; /* 부드러운 전환 효과 */
}
.slides img {
width: 100%; /* 슬라이더 너비에 맞게 조정 */
height: 300px; /* 슬라이더 높이에 맞게 조정 */
object-fit: cover; /* 이미지가 박스에 꽉 차도록 조정하되, 비율 유지 */
}
</style>
<body>
<div class="slider">
<div class="slides">
<img src="https://www.mhnse.com/news/photo/202310/226166_234755_1442.jpg" alt="Image 1">
<img src="https://cdn.newsculture.press/news/photo/202302/517312_635335_819.jpg" alt="Image 2">
<img src="https://image.newsis.com/2021/05/18/NISI20210518_0000749326_web.jpg" alt="Image 3">
<!-- 추가 이미지 -->
</div>
</div>
</body>
</html>
<script>
document.addEventListener("DOMContentLoaded", function() {
const slider = document.querySelector('.slides');
let currentIndex = 0;
const slideCount = slider.children.length;
const slideWidth = 240; // 슬라이더의 너비를 맞춰주세요.
const slideInterval = 3000; // 3초 간격으로 설정
setInterval(function() {
currentIndex = (currentIndex + 1) % slideCount;
slider.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
}, slideInterval);
});
</script>결과값
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [Html & CSS] 헤더 항상 위에 고정 시키는 방법 !! (header sticky 주는 방법) (0) | 2024.02.23 |
|---|---|
| [Html & CSS] 백그라운드(background-color) 투명하게 만드는 방법 !! (0) | 2024.01.02 |
| [Html & CSS] a href 새창, 현재창 에서 오픈 하는 방법 !!(+ 설명) (0) | 2023.11.11 |
| [Html & CSS] span 태그에 onclick 온클릭 이벤트 넣는 방법 !! (0) | 2023.11.08 |
| [HTML & CSS] html에서 "visibility:hidden" 과 "display:none" 에 대한 설명 및 차이점(+사용 예시) (0) | 2023.11.07 |
댓글