자바스크립트 슬라이드 효과 : 좌로 움직이는 유형

자바스크립트 슬라이드 효과 : 좌로 움직이는 유형

자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 왼쪽으로 미끄러지듯이 이미지가 넘어가는 효과를 추가해준 유형입니다.

---

HTML 소스

HTML로 뼈대를 먼저 잡아줍니다. section 태그 안에는 클래스명이 slider__wrap인 div 박스, 그 안에는 클래스명이 slider__img인 div 박스를 만들어 주고, 그 안에는 slider__inner 박스, 그 안 slider 박스 안에는 각각 이미지 5장을 삽입해 주었습니다. 각각의 div 박스의 용도는 CSS 소스에서 추가로 설명하도록 하겠습니다. 궁금하면 보시든가...

<section id="sliderType02">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider">
                    <img src="../assets/img/effect_bg16-min.jpg" alt="이미지1">
                </div>
                <div class="slider">
                    <img src="../assets/img/effect_bg17-min.jpg" alt="이미지2">
                </div>
                <div class="slider">
                    <img src="../assets/img/effect_bg18-min.jpg" alt="이미지3">
                </div>
                <div class="slider">
                    <img src="../assets/img/effect_bg19-min.jpg" alt="이미지4">
                </div>
                <div class="slider">
                    <img src="../assets/img/effect_bg20-min.jpg" alt="이미지5">
                </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS 소스

/* slider */
.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img { /* 이미지 보이는 영역 */
    position: relative;
    width: 800px;
    height: 520px;
    overflow: hidden;
}
.slider__inner { /* 이미지를 감싸고 있는 부모(움직이는 부분) */
    display: flex;
    flex-wrap: wrap;
    width: 4000px;
    height: 520px;
}
.slider { /* 개별적인 이미지 */
    position: relative;
    width: 800px;
    height: 520px;
}
.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: 260px;
    }
}

JAVASCRIPT 소스

자바스크립트로는 먼저 선택자를 만들어 주었습니다. 이후 currentIndex라는 변수를 선언하고, setInterval 함수를 사용했습니다. 2초마다 변수의 값이 1씩 커지되, 이미지 슬라이드의 총 개수만큼 커지면 기본값(0)에서 다시 값이 증가되도록 작업해 주었습니다. 이미지들에는 transition으로 움직임 애니메이션을 주었고, 이미지의 너비가 800px이므로 좌측으로 800px씩 움직이도록 작업해 주었습니다.

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img");  // 보여지는 영역
const sliderInner = document.querySelector(".slider__inner");  // 움직이는 영역
const slider = document.querySelectorAll(".slider")  // 이미지
    
let currentIndex = 0;
let sliderCount = slider.length;  // 이미지 개수
    
sliderInner.style.transition = "all 0.6s";
    
// sliderInner.style.transform += "translateX(0px)";        800 * 0
// sliderInner.style.transform += "translateX(-800px)";     800 * 1
// sliderInner.style.transform += "translateX(-1600px)";    800 * 2
// sliderInner.style.transform += "translateX(-2400px)";    800 * 3
// sliderInner.style.transform += "translateX(-3200px)";    800 * 4
    
setInterval(() => {  // 2000 : 2초에 한 번씩 실행
    // currentIndex++;
    // currentIndex의 값이 이미지 개수를 초과하면, 값을 리셋시키도록 함
    
    // 1. if 조건문을 활용한 방법
    // if(currentIndex < slider.length-1){
    //     currentIndex++;
    // } else {
    //     currentIndex = 0;
    // }
    
    // 2. 삼항연산자를 활용한 방법(권장되지는 않음)
    // (currentIndex < 4) ? currentIndex++ : currentIndex = 0;
    
    // 3. 연산자를 활용하여 간단하게 표현하기
    currentIndex = (currentIndex + 1) % sliderCount;  // 1 2 3 4 0 1 2 3 4
    
    sliderInner.style.transform = "translateX("+ -800 * currentIndex +"px)";
}, 2000);

JQUERY 소스

이번에는 JQUERY 소스로도 작업해 보았습니다. JQUERY는 자바스크립트에서 표현하는 식을 비교적 간단하게 표현할 수 있었지만, 자바스크립트에 비해 애니메이션 부분은 다소 복잡했습니다.

let currentIndex = 0;

// 자바스크립트(좌변)에서 다음과 같은 작성하는 식을, 제이쿼리(우변)에서는 간단히 표현할 수 있음
// document.querySelector(".slider__inner") = $(".slider__inner")
setInterval(() => {
    currentIndex = (currentIndex + 1) % $(".slider").length;
    
    // $(".slider__inner").animate({
    //     transform : "translateX("+ -800 * currentIndex +")"
    // }, 2000);

    $(".slider__inner").css("position", "relative");  // css에 스타일 추가하기
    $(".slider__inner").animate({ left: -800 * currentIndex }, 600)
}, 2000);

GSAP 소스

이번에는 GSAP 소스로도 작업해 보았습니다. GSAP를 활용하면, 간단한 소스로 부드러운 애니메이션을 표현할 수 있습니다.

const slider = document.querySelectorAll(".slider");
let currentIndex = 0;
    
setInterval(() => {
    currentIndex = (currentIndex + 1) % slider.length;
 
    gsap.to(".slider__inner", {
        x: -800 * currentIndex,
    });
}, 2000);

---

결과

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