[JavaScript] 이미지 슬라이드 소스

<style>
        #slideshow-container {
            max-width: 1000px;
            position: relative;
            margin: auto;
            overflow: hidden;
        }

        .slides {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .slide {
            min-width: 100%;
            box-sizing: border-box;
        }

        img {
            width: 100%;
            height: auto;
        }
    </style>



<div id="slideshow-container">
    <div class="slides">
        <c:forEach var="fileList" items="${fileList}" varStatus="status">
            <div class="slide">
                <img alt="" src='<c:url value="/cmm/fms/getImage.do"/>?atchFileId=<c:out value="${fileList.atchFileId}"/>&fileSn=<c:out value="${fileList.fileSn}"/>' />
            </div>
        </c:forEach>
    </div>
</div>


<script>
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var slides = document.querySelector('.slides');
        var slideWidth = document.querySelector('.slide').clientWidth;

        slideIndex++;
        if (slideIndex * slideWidth > slides.scrollWidth) {
            slideIndex = 1;
        }

        slides.style.transform = 'translateX(' + (-slideIndex * slideWidth) + 'px)';
        setTimeout(showSlides, 2000); 
    }
</script>