슬라이드 이펙트04_좌에서 우로 움직이기(연속으로)

이미지를 여러개 배치하여 움직이게 하며 연속으로 옆으로 지나가는 슬라이드 이펙트를 만들어 보도록 합니다.

어제 올린 1,2,3번도 마찬가지지만 gsap과 jqurey를 활용하여 세가지 방법을 사용하였습니다. 

모두 올리니 차이점을 확인해 보시길 바랍니다

---

HTML

<header id="header">
    <h1>Javascript slider Effect04</h1>
    <p>슬라이드 이펙트04 : 좌로 움직이기(연속적으로)</p>
    <ul>
        <li><a href="sliderEffect01.html">1</a></li>
        <li><a href="sliderEffect02.html">2</a></li>
        <li><a href="sliderEffect03.html">3</a></li>
        <li class="active"><a href="sliderEffect04.html">4</a></li>
        <li><a href="sliderEffect05.html">5</a></li>
        <li><a href="sliderEffect06.html">6</a></li>
    </ul>

</header>
<!-- //header -->

<main id="main">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider s1"><img src="./img/Effect_bg04-min.jpg" alt="이미지 1"></div>
                <div class="slider s2"><img src="./img/Effect_bg03-min.jpg" alt="이미지 2"></div>
                <div class="slider s3"><img src="./img/Effect_bg05-min.jpg" alt="이미지 3"></div>
                <div class="slider s4"><img src="./img/Effect_bg09-min.jpg" alt="이미지 4"></div>
                <div class="slider s5"><img src="./img/Effect_bg10-min.jpg" alt="이미지 5"></div>
            </div>
        </div>
    </div>
</main>
<!-- //main -->

<footer id="footer">
    <a href="mailto:jo0132@naver.com">jo0132@naver.com</a>
</footer>
<!-- //footer -->

헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며

메인부분을 slider__wrap으로 슬라이드를 감싸고

slider__img로 이미지를 한번에 감쌉니다.

그리고 slide__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: 4800px;
    height: 450px;
}
.slider{    /* 개별적인 이미지 */
    position: relative;
    width: 800px;
    height: 450px;
}

• .slider__wrap: 슬라이더를 감싸고 있는 부모 요소로, 화면 전체의 세로 높이(height: 100vh)를 가지며, 내부의 요소들을 가운데 정렬(display: flex; align-items: center; justify-content: center;)합니다.
• .slider__img: 이미지가 보이는 영역으로, 상대적인 위치(position: relative;)를 가지며, 가로 800px, 세로 450px 크기로 고정되어 있습니다. 이미지가 넘칠 경우(overflow: hidden;) 가려진 부분이 보이지 않도록 처리합니다.
• .slider__inner: 전체 이미지를 감싸고 있는 부모 요소로, 이미지들이 움직이는 영역입니다. 내부에 있는 이미지들을 flex-wrap: wrap; 속성을 사용하여 여러 줄로 나열합니다. 가로 크기는 4800px로 설정되어 있어, 슬라이더가 움직일 때 이미지들이 이 영역 내에서 움직이게 됩니다.
• .slider: 개별적인 이미지를 나타내는 요소로, 상대적인 위치(position: relative;)를 가지며, 가로 800px, 세로 450px 크기로 고정되어 있습니다.

---

JAVASCRIPT

<script>
    const sliderWrap = document.querySelector(".slider__wrap");         
    const sliderImg = sliderWrap.querySelector(".slider__img");             //
    const sliderInner = sliderWrap.querySelector(".slider__inner");
    const slider = sliderWrap.querySelectorAll(".slider");                  // slider를 배열로 받으므로 하나하나 선택할경우 배열로 선택 가능하다.

    let currentIndex = 0;                                                   // 현재 보이는 이미지
    let sliderCount = slider.length;                                        //이미지 갯수
    let sliderWidth = slider[0].offsetWidth;                                //이미지 가로값
    let sliderClone = sliderInner.firstElementChild.cloneNode(true);        //첫번째 이미지 복사
    let sliderInterval = 2000;

</script>

<!-- 자바스크립트 -->
<script>

    // 복사한 첫번째 이미지 마지막에 붙여넣기
    sliderInner.appendChild(sliderClone);

    function sliderEffect(){
        currentIndex++;

        sliderInner.style.transition = "all 0.6s"
        sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";

        //마지막 이미지에 위치 했을 때
        if(currentIndex == sliderCount){
            setTimeout(() =>{
                sliderInner.style.transition = "0s"
                sliderInner.style.transform = "translateX(0px)";
            },700)
            currentIndex = 0;
        }
    }
    setInterval(sliderEffect, sliderInterval)

</script>

• sliderWrap, sliderImg, sliderInner, slider 등의 변수들을 이용하여 각각의 요소들을 선택합니다. sliderWrap은 슬라이더를 감싸고 있는 부모 요소를, sliderImg는 이미지가 보이는 영역을, sliderInner는 이미지들이 움직이는 영역을, slider는 개별적인 이미지들을 선택합니다.
• currentIndex 변수를 초기화하여 현재 보이는 이미지의 인덱스를 저장합니다. sliderCount 변수에는 이미지의 개수를, sliderWidth 변수에는 이미지의 가로 크기를 저장합니다.
• sliderClone 변수에는 첫 번째 이미지를 복사하여 저장합니다. 이후 sliderInner에 복사한 이미지를 마지막에 추가하여, 슬라이더가 무한 루프로 동작하도록 구현합니다.
• sliderEffect 함수는 슬라이더의 동작 효과를 구현한 함수로, currentIndex를 증가시켜 다음 이미지로 이동시킵니다. 이때, sliderInner의 CSS 속성을 변경하여 이미지를 움직이는 효과를 줍니다. 마지막 이미지에 도달하면, 이미지를 처음으로 되돌리는 처리를 합니다.
• setInterval 함수를 사용하여 sliderEffect 함수를 일정 시간 간격(sliderInterval 변수에 저장된 값)으로 반복 실행하도록 설정하여, 자동으로 슬라이더가 움직이게 됩니다.

---

GSAP

<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
    sliderInner.appendChild(sliderClone);

    function sliderEffect(){
        currentIndex++;

        gsap.to(sliderInner, {
            duration: 0.6,
            x: -sliderWidth * currentIndex,
            ease: "elastic.out(1.5, 0.9)"
        });

        if(currentIndex === sliderCount){
            setTimeout(() =>{
                gsap.set(sliderInner, {x: 0});
                currentIndex = 0;
            },700);
        }
    }

    setInterval(sliderEffect, sliderInterval);
</script>

• sliderInner.appendChild(sliderClone); 코드는 기존의 자바스크립트 코드와 동일하게, sliderInner 요소에 sliderClone을 추가하는 코드입니다.
• gsap.to(sliderInner, { ... }); 코드는 GSAP을 이용하여 sliderInner 요소의 애니메이션을 설정하는 코드입니다. duration 속성으로 애니메이션의 지속 시간을 설정하고, x 속성으로 요소의 X 축 변환 값을 변경하여 슬라이더의 움직임을 구현합니다. ease 속성은 애니메이션의 가속도와 감속도를 조절하는데 사용되며, "elastic.out(1.5, 0.9)"는 탄성 모션 효과를 적용합니다.
• 나머지 부분은 기존의 자바스크립트 코드와 동일하게 동작합니다. sliderEffect 함수는 슬라이더의 동작 효과를 구현하고, setInterval 함수를 사용하여 일정 시간 간격으로 sliderEffect 함수를 반복 실행하도록 설정합니다.

---

jQuery

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
    // 첫번째 이미지를 마지막에 복사하여 붙여넣기

    $(".slider__inner").append(sliderClone);

    function sliderEffect() {
        currentIndex++;

        $(".slider__inner").css({
            "transition": "all 0.6s",
            "transform": "translateX(-" + sliderWidth * currentIndex + "px)"
        });

        // 마지막 이미지에 위치 했을 때
        if (currentIndex === sliderCount) {
            setTimeout(function() {
                $(".slider__inner").css({
                    "transition": "0s",
                    "transform": "translateX(0px)"
                });
            }, 700);
            currentIndex = 0;
        }
    }
    setInterval(sliderEffect, sliderInterval);
</script>

• $ 기호는 jQuery의 약어로, jQuery 라이브러리를 이용하여 DOM 요소를 선택하고 조작하는 데 사용됩니다.
• $(".slider__inner").append(sliderClone); 코드는 jQuery를 이용하여 .slider__inner 클래스를 가진 요소에 sliderClone을 추가하는 코드입니다. 이는 기존의 자바스크립트 코드에서 sliderInner.appendChild(sliderClone); 부분에 해당합니다.
• $(".slider__inner").css({ ... }); 코드는 jQuery를 이용하여 .slider__inner 클래스를 가진 요소의 CSS 스타일을 변경하는 코드입니다. 이는 기존의 자바스크립트 코드에서 sliderInner.style.transition, sliderInner.style.transform 등을 변경하는 부분에 해당합니다.
• 나머지 부분은 기존의 자바스크립트 코드와 동일하게 동작합니다. sliderEffect 함수는 슬라이더의 동작 효과를 구현하고, setInterval 함수를 사용하여 일정 시간 간격으로 sliderEffect 함수를 반복 실행하도록 설정합니다.

---