Slider Effect 02

슬라이드 이펙트

이번 시간에는 슬라이드 이펙트 좌로 움직이기 효과에 대해 알아보겠습니다.

---

슬라이드 02

2초마다 중앙의 사진이 왼쪽으로 이동합니다.

원본 사이트 보기 원본 소스 보기

01. HTML 코드

{
    <main id="main">
    <section id="sliderType01">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider"><img src="../assets/img/effect_bg06-min.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="../assets/img/effect_bg07-min.jpg" alt="이미지2"></div>
                    <div class="slider"><img src="../assets/img/effect_bg08-min.jpg" alt="이미지3"></div>
                    <div class="slider"><img src="../assets/img/effect_bg09-min.jpg" alt="이미지4"></div>
                    <div class="slider"><img src="../assets/img/effect_bg10-min.jpg" alt="이미지5"></div>
                </div>
            </div>
        </div>
    </section>
</main>
} 

02. CSS 코드

{
    /* slider */
    .slider__wrap {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .slider__img {      /* 이미지 보이는 영역 */
        position: relative;
        width: 800px;
        height: 450px;
        overflow: hidden;
    }
    .slider__inner {    /* 이미지를 감싸고 있는 부모 : 움직이는 부분 */
        display: flex;
        flex-wrap: wrap;
        width: 4000px;
        height: 450px;
    }
    .slider {           /* 개별적인 이미지 */
        position: relative;
        width: 800px;
        height: 450px;
    }
    .slider::before {
        position: absolute;
        left: 5px;
        top: 5px;
        background: rgba(0,0,0,0.4);
        color: #fff;
        padding: 5px 10px;
    }
    .slider:nth-child(1)::before {content: '이미지1';}
    .slider:nth-child(2)::before {content: '이미지2';}
    .slider:nth-child(3)::before {content: '이미지3';}
    .slider:nth-child(4)::before {content: '이미지4';}
    .slider:nth-child(5)::before {content: '이미지5';}
    .slider:nth-child(1) {z-index: 5;}
    .slider:nth-child(2) {z-index: 4;}
    .slider:nth-child(3) {z-index: 3;}
    .slider:nth-child(4) {z-index: 2;}
    .slider:nth-child(5) {z-index: 1;}

    @media (max-width: 800px){
        .slider__img {
            width: 400px;
            height: 225px;
        }
    }
}

03. script 코드

setInterval 메소드를 이용해서 2초에 한번씩 사진이 왼쪽으로 미끄러지듯이 이동하게 만들어 줍니다.
3가지 방식으로 애니메이션 효과를 나타내보도록 하겠습니다.

03-1. javascript 방식

{
    const sliderInner = document.querySelector(".slider__inner");  
    const slider = document.querySelectorAll(".slider"); 
    let currentIndex = 0;
    
    sliderInner.style.transition = "all 0.6s";  
    setInterval(() => {
        currentIndex = (currentIndex + 1) % slider.length;   

        sliderInner.style.transform = "translateX("+ -800 * currentIndex +"px)";
    }, 2000);
}

03-2. GSAP 방식

{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
    <script>
        const slider = document.querySelectorAll(".slider");
        let currentIndex = 0;
    
        setInterval(() => {
            currentIndex = (currentIndex + 1) % slider.length; 
    
            gsap.to(".slider__inner", {
                x : -800 * currentIndex
            });
        }, 2000);
    </script>
}

03-3. jQuery 방식

{
    <script src="https://ajax.googleapis.com/ajax/libs//3.6.0/.min.js"></script>
    <script>
        let currentIndex = 0;
    
        setInterval(() => {
            currentIndex = (currentIndex + 1) % $(".slider").length; 
    
            $(".slider__inner").css("position", "relative");
            $(".slider__inner").animate({ left : -800 * currentIndex }, 600);
        }, 2000);
    </script>
}