슬라이드 유형(S-3) : 위아래(반응형)

소스 보기

Javascript

HTML

CSS


$(function() {
    let currentIndex = 0;   //현재 이미지 설정
    $(".sliderWrap").append($(".slider").first().clone(true));  //첫 번째 이미지를 복사해서 마지막에 추가

    setInterval(() => {
        currentIndex++;     //현재 이미지를 1씩 증가
        $(".sliderWrap").animate({marginTop: -100 * currentIndex + "vh"}, 600);

        if(currentIndex == 3){
            setTimeout(() => {
                $(".sliderWrap").animate({marginTop: 0}, 0);    //애니메이션 정지
                currentIndex = 0;       //현재 이미지 초기화
            }, 700)
        }
    }, 3000);
});

<div id="wrap">
    <main id="main">
        <header id="header">
            <h1></h1>
            <nav></nav>
        </header>
        <!-- //header -->

        <section id="contents">
            <div class="banner"></div>
            <div class="notice"></div>
            <div class="gallery"></div>
            <div class="link"></div>
        </section>
        <!-- //contents -->

        <article id="slider">
        </article>
        <!-- //slider -->
    </main>
    <!-- //main -->
    <footer id="footer">
        <div class="footer1"></div>
        <div class="footer2">
            <div class="footer2-1"></div>
            <div class="footer2-2"></div>
        </div>
    </footer>
    <!-- //footer -->
</div>
<!-- //wrap -->

        * {
    margin: 0;
    padding: 0;
    font-family: 'GmarketSans';
}
#wrap {
    width: 100%;           
}
#main {
    width: 100%;
    height: calc(100vh - 120px);
    background-color: #efefef;
    display: flex;
}
#header {
    width: 200px;
    height: 100%;
}
#header h1 {
    width: 100%;
    height: 10%;
    background-color: #e3e3e3;
    font-size: 16px;
}
#header nav {
    width: 100%;
    height: 90%;
    background-color: #d9d9d9;
}
#contents {
    width: 400px;
    height: 100%;
}
#contents .banner {
    width: 100%;
    height: 15%;
    background-color: #d1d1d1;
}
#contents .notice {
    width: 100%;
    height: 35%;
    background-color: #c7c7c7;
}
#contents .gallery {
    width: 100%;
    height: 35%;
    background-color: #bcbcbc;
}
#contents .link {
    width: 100%;
    height: 15%;
    background-color: #b1b1b1;
}
#slider {
    width: calc(100% - 600px);
    height: 100%;
    background-color: #a3a3a3;
}
#footer {
    width: 100%;
    display: flex;
}
#footer .footer1 {
    width: 20%;
    height: 120px;
    background-color: #9d9d9d;
}
#footer .footer2 {
    width: 80%;
}
#footer .footer2 .footer2-1 {
    width: 100%;
    height: 60px;
    background-color: #929292;
}
#footer .footer2 .footer2-2 {
    width: 100%;
    height: 60px;
    background-color: #838383;
}

/* slider */
#slider {
    overflow: hidden;
    height: calc(100vh - 120px);
}
.sliderWrap {
    width: 100%;
    height: 300vh;
}
.sliderWrap .slider {
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}
.sliderWrap .slider.s1 {
    background-image: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider04.jpg);
}
.sliderWrap .slider.s2 {
    background-image: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider05.jpg);
}
.sliderWrap .slider.s3 {
    background-image: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider06.jpg);
}
.sliderWrap .slider img {
    vertical-align: top;
}
.sliderWrap .slider span {
    position: absolute;
    left: 50%;
    top: calc(50% - 60px);
    transform: translate(-50%, -50%);
    background-color: rgba(255,255,255,0.3);
    padding: 10px 20px;
}

이미지1

이미지2

이미지3