[HTML CSS JS] 자동 카드 슬라이더 만들기

Auto scroll Card Slider - HTML CSS vanilla JS

---

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

See the Pen weather card slider by rebornbb (@bongcasso01) on CodePen.

 

html

    <div class="Weather">
        <div class="Weather-slideshow-container">
            <div>
                <a class="Weather-prev" onclick='WeatherPlusSlides(-1)'>&#10094;</a>
            </div>

            <div class="align-Colum align-Center">
                <div class="BorderRound Tmoney-fontsize-150">
                <span class="nowtime"></span>
                <span class="marginLeft-5">현재날씨</span>
                </div>

                <div class="Weather-Slides Weather-fade">
                    <div class="align-Center align-Colum paddingTop-10">
                        <h3 class="Tmoney-fontsize-150 color-blue">강원도</h3>
                        <h3 class="ChuncheonIcon"></h3>
                        <h3 class="ChuncheonNowtemp KOTRA-fontsize-100">현재기온:</h3>
                        <h3 class="ChuncheonLowtemp KOTRA-fontsize-100">최저기온:</h3>
                        <h3 class="ChuncheonHightemp KOTRA-fontsize-100">최대기온:</h3>
                    </div>
                </div>

                <div class="Weather-Slides Weather-fade">
                    <div class="align-Center align-Colum paddingTop-10">
                        <h3 class="Tmoney-fontsize-150 color-blue">경기도</h3>
                        <h3 class="SeoulIcon"></h3>
                        <h3 class="SeoulNowtemp KOTRA-fontsize-100">현재기온:</h3>
                        <h3 class="SeoulLowtemp KOTRA-fontsize-100">최저기온:</h3>
                        <h3 class="SeoulHightemp KOTRA-fontsize-100">최대기온:</h3>
                    </div>
                </div>

                <div class="Weather-Slides Weather-fade">
                    <div class="align-Center align-Colum paddingTop-10">
                        <h3 class="Tmoney-fontsize-150 color-blue">충청북도</h3>
                        <h3 class="ChungjuIcon"></h3>
                        <h3 class="ChungjuNowtemp KOTRA-fontsize-100">현재기온:</h3>
                        <h3 class="ChungjuLowtemp KOTRA-fontsize-100">최저기온:</h3>
                        <h3 class="ChungjuHightemp KOTRA-fontsize-100">최대기온:</h3>
                    </div>
                </div>

                <div class="Weather-Slides Weather-fade">
                    <div class="align-Center align-Colum paddingTop-10">
                        <h3 class="Tmoney-fontsize-150 color-blue">충청남도</h3>
                        <h3 class="DaejeonIcon"></h3>
                        <h3 class="DaejeonNowtemp KOTRA-fontsize-100">현재기온:</h3>
                        <h3 class="DaejeonLowtemp KOTRA-fontsize-100">최저기온:</h3>
                        <h3 class="DaejeonHightemp KOTRA-fontsize-100">최대기온:</h3>
                    </div>
                </div>

                <div class="Weather-Slides Weather-fade">
                    <div class="align-Center align-Colum paddingTop-10">
                        <h3 class="Tmoney-fontsize-150 color-blue">전라북도</h3>
                        <h3 class="JeonjuIcon"></h3>
                        <h3 class="JeonjuNowtemp KOTRA-fontsize-100">현재기온:</h3>
                        <h3 class="JeonjuLowtemp KOTRA-fontsize-100">최저기온:</h3>
                        <h3 class="JeonjuHightemp KOTRA-fontsize-100">최대기온:</h3>
                    </div>
                </div>

                <div class="Weather-Slides Weather-fade">
                    <div class="align-Center align-Colum paddingTop-10">
                        <h3 class="Tmoney-fontsize-150 color-blue">전라남도</h3>
                        <h3 class="GwangjuIcon"></h3>
                        <h3 class="GwangjuNowtemp KOTRA-fontsize-100">현재기온:</h3>
                        <h3 class="GwangjuLowtemp KOTRA-fontsize-100">최저기온:</h3>
                        <h3 class="GwangjuHightemp KOTRA-fontsize-100">최대기온:</h3>
                    </div>
                </div>

                <div class="Weather-Slides Weather-fade">
                    <div class="align-Center align-Colum paddingTop-10">
                        <h3 class="Tmoney-fontsize-150 color-blue">경상북도</h3>
                        <h3 class="DaeguIcon"></h3>
                        <h3 class="DaeguNowtemp KOTRA-fontsize-100">현재기온:</h3>
                        <h3 class="DaeguLowtemp KOTRA-fontsize-100">최저기온:</h3>
                        <h3 class="DaeguHightemp KOTRA-fontsize-100">최대기온:</h3>
                    </div>
                </div>

                <div class="Weather-Slides Weather-fade">
                    <div class="align-Center align-Colum paddingTop-10">
                        <h3 class="Tmoney-fontsize-150 color-blue">경상남도</h3>
                        <h3 class="BusanIcon"></h3>
                        <h3 class="BusanNowtemp KOTRA-fontsize-100">현재기온:</h3>
                        <h3 class="BusanLowtemp KOTRA-fontsize-100">최저기온:</h3>
                        <h3 class="BusanHightemp KOTRA-fontsize-100">최대기온:</h3>
                    </div>
                </div>

                <div class="Weather-Slides Weather-fade">
                    <div class="align-Center align-Colum paddingTop-10">
                        <h3 class="Tmoney-fontsize-150 color-blue">제주</h3>
                        <h3 class="JejuIcon"></h3>
                        <h3 class="JejuNowtemp KOTRA-fontsize-100">현재기온:</h3>
                        <h3 class="JejuLowtemp KOTRA-fontsize-100">최저기온:</h3>
                        <h3 class="JejuHightemp KOTRA-fontsize-100">최대기온:</h3>
                    </div>
                </div>
            </div>

            <div>
                <a class="Weather-next" onclick='WeatherPlusSlides(1)'>&#10095;</a>
            </div>

        </div>
        <br>
        <div style='text-align: center;'>
            <span class="Weather-dot" onclick='WeatherCurrentSlide(1)'></span>
            <span class="Weather-dot" onclick='WeatherCurrentSlide(2)'></span>
            <span class="Weather-dot" onclick='WeatherCurrentSlide(3)'></span>
            <span class="Weather-dot" onclick='WeatherCurrentSlide(4)'></span>
            <span class="Weather-dot" onclick='WeatherCurrentSlide(5)'></span>
            <span class="Weather-dot" onclick='WeatherCurrentSlide(6)'></span>
            <span class="Weather-dot" onclick='WeatherCurrentSlide(7)'></span>
            <span class="Weather-dot" onclick='WeatherCurrentSlide(8)'></span>
            <span class="Weather-dot" onclick='WeatherCurrentSlide(9)'></span>
        </div>
    </div>

/*----------날씨카드슬라이드---------- */
*{
  margin : 0;
  padding : 0;
}
.marginLeft-5{
    margin-left: 5%;
}
.align-Colum {
    display: flex;
    flex-direction: column;
}
.paddingTop-10 {
    padding-top: 10%;
}
.align-Center{
    display: flex;
    justify-content: center;
    align-items: center;
}

.Weather{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.Weather-slideshow-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.Weather-Slides {
    border-radius: 5%;
    display: flex;
    justify-content: center;
    width: 200px;
    height: 200px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}

.Weather-prev,
.Weather-next {
    display: flex;
    align-content: center;
    cursor: pointer;
    width: auto;
    margin-top: 150%;
    padding: 20px;
    color: #5B86EF;
    font-weight: bold;
    font-size: 30px;
    transition: .6s ease;
    border-radius: 0 3px 3px 0
}

.Weather-next {
    border-radius: 3px 3px 3px 3px
}

.Weather-prev {
    border-radius: 3px 3px 3px 3px
}

.Weather-prev:hover,
.Weather-next:hover {
    color: black;
}

.Weather-dot {
    cursor: pointer;
    height: 5px;
    width: 15px;
    margin: 0 2px;
    background-color: #5B86EF;
    display: inline-block;
    transition: background-color .6s ease
}

.Weather-dot:hover {
    background-color: black;
}

.BorderRound{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 180px;
    background: #5B86EF;
    color: white;
    border-radius: 10px;
    padding: 5%;
    margin: 5%;
}

var WeatherslideIndex = 1;

    var WeatherSlideTimer;

    var slideshowContainer;

    window.addEventListener("load", function () {
        WeathershowSlides(WeatherslideIndex);
        WeatherSlideTimer = setInterval(function () {
            WeatherPlusSlides(1)
        }, 2000);

        //화살표 부분을 마우스 멈춤/재개 부분으로 유지하려면 아래 줄을 주석 처리하세요
        slideshowContainer = document.getElementsByClassName('Weather-slideshow-inner')[0];

        //화살표 부분을 마우스 일시 중지/재개에 유지하려면 아래 줄의 주석 처리를 제거하세요
        // slideshowContainer = document.getElementsByClassName('Weather-slideshow-container')[0];

        slideshowContainer.addEventListener('mouseenter', pause)
        slideshowContainer.addEventListener('mouseleave', resume)
    })

    // 다음 그리고 이전 컨트롤
    function WeatherPlusSlides(n) {
        clearInterval(WeatherSlideTimer);
        if (n < 0) {
            WeathershowSlides(WeatherslideIndex -= 1);
        } else {
            WeathershowSlides(WeatherslideIndex += 1);
        }

        //화살표 부분을 PAUSE/RESUME의 일부로 유지하려면 아래 줄을 주석 처리하세요

        if (n === -1) {
            WeatherSlideTimer = setInterval(function () {
                WeatherPlusSlides(n + 2)
            }, 2000);
        } else {
            WeatherSlideTimer = setInterval(function () {
                WeatherPlusSlides(n + 1)
            }, 2000);
        }
    }

    //현재 슬라이드를 제어하고 필요한 경우 간격을 재설정합니다
    function WeatherCurrentSlide(n) {
        clearInterval(WeatherSlideTimer);
        WeatherSlideTimer = setInterval(function () {
            WeatherPlusSlides(n + 1)
        }, 2000);
        WeathershowSlides(WeatherslideIndex = n);
    }

    function WeathershowSlides(n) {
        var i;
        var slides = document.getElementsByClassName("Weather-Slides");
        var Weatherdots = document.getElementsByClassName("Weather-dot");
        if (n > slides.length) {
            WeatherslideIndex = 1
        }
        if (n < 1) {
            WeatherslideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < Weatherdots.length; i++) {
            Weatherdots[i].className = Weatherdots[i].className.replace(" active", "");
        }
        slides[WeatherslideIndex - 1].style.display = "block";
        Weatherdots[WeatherslideIndex - 1].className += " active";
    }

    pause = () => {
        clearInterval(WeatherSlideTimer);
    }

    resume = () => {
        clearInterval(WeatherSlideTimer);
        WeatherSlideTimer = setInterval(function () {
            WeatherPlusSlides(WeatherslideIndex)
        }, 2000);
    }