[HTML CSS JS] 자동 이미지 슬라이더 만들기

Auto Image Carousel - HTML CSS vanilla JS

---

codepen link: https://codepen.io/bongcasso01/pen/xxjbzXa

See the Pen auto slider vanilla js css by rebornbb (@bongcasso01) on CodePen.

 

html

<span class="slideshow-container">
                 <div class="Slidesbackground">
                    <div class="mySlides fade">
                    <img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2369&q=80" class="slideshow-image">
                    </div>
                    <div class="mySlides fade">
                        <img src="https://images.unsplash.com/photo-1581888227599-779811939961?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80" class="slideshow-image">
                    </div>
                    <div class="mySlides fade">
                        <img src="https://images.unsplash.com/photo-1534361960057-19889db9621e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80" class="slideshow-image">
                    </div>
                    <div class="mySlides fade">
                        <img src="https://images.unsplash.com/photo-1527526029430-319f10814151?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80" class="slideshow-image">
                    </div>
                    <div class="mySlides fade">
                        <img src="https://images.unsplash.com/photo-1600077029182-92ac8906f9a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80" class="slideshow-image">
                    </div>
                    <div class="mySlides fade">
                        <img src=https://cdn.cnn.com/cnnnext/dam/assets/201030094143-stock-rhodesian-ridgeback-super-tease.jpg" class="slideshow-image">
                    </div>
                </div>
             </span>

css

.Slidesbackground {
    margin: 0;
    padding: 0;

}
.slideshow-image{
    border-radius:3%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.mySlides {
    border-radius:3%;
    width: 600px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.5);
}

.slideshow-container {
    display: flex;
    justify-content: center;
    position: relative;
    margin: auto;
}

.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

@keyframes

개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써

CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다.

keyframes 설명 : https://developer.mozilla.org/ko/docs/Web/CSS/@keyframes

 

js

var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
       
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {
            slideIndex = 1
        }
        slides[slideIndex - 1].style.display = "block";
    
        setTimeout(showSlides, 2000); // 2초마다 이미지가 체인지됩니다
    }

display: none 과 block 으로 속성을 변경하여 이전 이미지가 보이지않고, 다음이미지가 보여지는 효과를 넣어줍니다.