JS, jQuery, GSAP로 슬라이드 이펙트 적용해보기! - 4 좌 우

 css

<style>
    /* 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 { /*이미지 움직이는 영역 */
        height: 450px;
        width: 4800px;  /*이미지의 총 길이 4800*/
    }
    .slider {  /*개별적인 이미지*/
        position: relative;
        width: 800px;
        height: 450px;
    }
</style>

HTML

<main id="main">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider s1"><img src="./img/sliderEffect06.jpg" alt="이미지1"></div>
                <div class="slider s2"><img src="./img/sliderEffect07.jpg" alt="이미지2"></div>
                <div class="slider s3"><img src="./img/sliderEffect08.jpg" alt="이미지3"></div>
                <div class="slider s4"><img src="./img/sliderEffect09.jpg" alt="이미지4"></div>
                <div class="slider s5"><img src="./img/sliderEffect10.jpg" alt="이미지5"></div>
            </div>
        </div>
    </div>
</main>
    <!--main-->

script

<script>
    // 선택자 
    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 sliderWidth = slider[0].offsetWidth;    //이미지 가로 값
    let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫 번째 이미지 복사 cloneNode(true)를 하먄 1번이 맨 뒤로 들어감

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

 

<script>
let sliderInterval = 3000;

function sliderEffect(){
    currentIndex++;

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