슬라이드 유형(S-1) : 페이드(반응형)

소스 보기

Javascript

HTML

CSS


let currentIndex = 0;   //현재 이미지 설정

setInterval(() => {     //3초마다 실행
    let nextIndex = (currentIndex + 1) % 3 // 1 2 0 1 2 0 1 2 0

    $(".slider").eq(currentIndex).fadeOut(1200);   //첫 번째 이미지 숨김
    $(".slider").eq(nextIndex).fadeIn(1200);    //두번째 이미지 나타남

    currentIndex = nextIndex;   //두번째 이미지 값을 현재 이미지에 저장
}, 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 */
.sliderWrap {
    position: relative;
    height: 100%;
}
/* .sliderWrap > div {
    display: none;
}
.sliderWrap > div:first-child {
    display: block;
} */
.sliderWrap .slider {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.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 span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255,255,255,0.4);
    padding: 10px 20px;
}

이미지1

이미지2

이미지3