[Html & CSS] 초간단 자동으로 움직이는 사진 슬라이드 예시 코드 !!

Coding/HTML & CSS

[Html & CSS] 초간단 자동으로 움직이는 사진 슬라이드 예시 코드 !!

포스트it 2023. 11. 15. 09:00

728x90

[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