슬라이드 효과 만들기(translateX)

TranslateX의 값으로 슬라이드 효과 만들기

이번에는 translateX의 값을 조절하여 이미지가 좌로 넘어가는 효과를 만들어보겠습니다.

 

HTML 작성하기

<main id="main">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider"><img src="img/sliderEffect06-min.jpg" alt="이미지6"></div>
                <div class="slider"><img src="img/sliderEffect07-min.jpg" alt="이미지7"></div>
                <div class="slider"><img src="img/sliderEffect08-min.jpg" alt="이미지8"></div>
                <div class="slider"><img src="img/sliderEffect09-min.jpg" alt="이미지9"></div>
                <div class="slider"><img src="img/sliderEffect10-min.jpg" alt="이미지10"></div>
            </div>
        </div>
    </div>
</main>

변경된 HTML 알아보기

• main의 구조만 살짝 바뀌었는데, 각각의 이미지 전체를 감싸고 있는 slider__inner를 추가했습니다.

CSS 작성하기

/* slider__wrap */
.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;
}

변경된 CSS 알아보기

• slide__inner에 display:flex 속성을 부여해 모든 사진이 가로로 정렬되도록 만들었습니다.
• slide의 position을 relative로 바꾸어주었습니다.

Javascript 작성하기 (javascript 사용)

// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");     // 보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); // 윰직이는 영역
const slider = sliderWrap.querySelectorAll(".slider");          // 개별 이미지

let currentIndex = 0;               // 현재 보이는 이미지
let sliderCount = slider.length     // 전체 이미지 개수
let sliderInterval = 3000;          // 이미지 변경 간격

sliderInner.style.transition = "all 0.6s"

setInterval(() => {
    currentIndex = (currentIndex + 1) % sliderCount;

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

javascript 정리해보기

• 선택자로는 slider__inner의 선택자만 하나 더 추가했습니다.
• currentIndex에 (currentIndex + 1) % sliderCount의 값을 저장해줍니다.
• sliderInner에 style transform 을 translateX( -800 * currentIndex )px 만큼 이동하도록 합니다.
• 이 과정을 sliderInterval 간격으로 반복합니다.

Javascript 작성하기 (GSAP 사용)

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
    setInterval(() => {
        currentIndex = (currentIndex + 1) % sliderCount;

        gsap.to(sliderInner, {
            x : -800 * currentIndex,
            duration : 1,
            ease : "elastic.out(1, 0.8)"
        });
    }, sliderInterval)
</script>

javascript 정리해보기

• 선택자는 위와 동일하게 사용합니다. (코드블럭에는 생략)
• gsap의 홈페이지에서 cdn을 가져와 적어줍니다.
• 같은 방법으로 setInterval 함수를 사용합니다.
• gsap.to(sliderInner, (혹은 ".slider__inner" 사용가능) 에
• {x : -800 * currentIndex (x 축 -800 * currentIndex만큼 이동) 의 속성을 부여합니다.
• duration은 움직이는 시간을 나타냅니다. 
• ease 에는 움직임의 효과를 적어줍니다. }
• 이 과정을 sliderInterval 간격으로 반복합니다.

Javascript 작성하기 (jQuery사용)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
    setInterval(() => {
        currentIndex = (currentIndex + 1) % $(".slider").length;

        $(".slider__inner").css("position", "relative");
        $(".slider__inner").animate({left : -800 * currentIndex}, 600, "easeOutElastic");
    }, sliderInterval)
</script>

javascript 정리해보기

• gsap와 동일하게 jquery 홈페이지에서 cdn을 가져와 적어줍니다.
• jquery에서는 $(".slider")로 표기 가능합니다.
• jquery에서는 translateX 속성이 없기 때문에 position의 값을 left로 이동시켜줍니다.

 

 

이상으로 세 가지 방법의 스크립트로 만들어 보았습니다.