슬라이드 이펙트02_우에서 좌로 움직이기

이미지를 여러개 배치하여 움직이게 하는 슬라이드 이펙트를 만들어 보도록 합니다.

---

HTML

<header id="header">
    <h1>Javascript slider Effect02</h1>
    <p>슬라이드 이펙트02 : 좌로 움직이기</p>
    <ul>
        <li><a href="sliderEffect01.html">1</a></li>
        <li class="active"><a href="sliderEffect02.html">2</a></li>
        <li><a href="sliderEffect03.html">3</a></li>
        <li><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"><img src="./img/Effect_bg03-min.jpg" alt="이미지 1"></div>
                <div class="slider"><img src="./img/Effect_bg04-min.jpg" alt="이미지 2"></div>
                <div class="slider"><img src="./img/Effect_bg05-min.jpg" alt="이미지 3"></div>
                <div class="slider"><img src="./img/Effect_bg09-min.jpg" alt="이미지 4"></div>
                <div class="slider"><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: 4000px;
    height: 450px;
}
.slider{    /* 개별적인 이미지 */
    position: relative;
    width: 800px;
    height: 450px;
}

• .slider__wrap: 슬라이더를 감싸는 부모 요소로, 화면의 100% 너비와 100vh(현재 창의 높이)의 높이를 가지며, 내부 요소들을 가운데로 정렬하는 스타일이 적용되어 있습니다.
• .slider__img: 슬라이더의 이미지가 보이는 영역으로, 상대적인 위치(position: relative)를 가지며, 너비와 높이가 각각 800px와 450px로 지정되어 있고, 오버플로우(overflow)가 숨겨져 있습니다.
• .slider__inner: 슬라이더의 전체 이미지를 감싸고 있는 부모 요소로, 내부의 이미지들이 움직이는 영역입니다. 내부 요소들이 flex로 배치되어 있고, 너비가 4000px로 지정되어 있어, 슬라이드 이미지가 좌우로 움직이게 됩니다.
• .slider: 개별적인 이미지를 나타내는 클래스로, 상대적인 위치(position: relative)를 가지며, 너비와 높이가 각각 800px와 450px로 지정되어 있습니다.

---

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");      // slider를 배열로 받으므로 하나하나 선택할경우 배열로 선택 가능하다.

    let currentIndex = 0;               // 현재 보이는 이미지
    let sliderCount = slider.length;    //이미지 갯수
    let sliderInterval = 3000;

</script>
<!-- 자바스크립트 --> 
<script>    
    // sliderInner.style.transform = traslateX("-0px");
    // sliderInner.style.transform = traslateX("-800px");
    // sliderInner.style.transform = traslateX("-1600px");
    // sliderInner.style.transform = traslateX("-2400px");
    // sliderInner.style.transform = traslateX("-3200px");
    // sliderInner.style.transform = traslateX("-0px");

    sliderInner.style.transition = "all 0.6s";

    setInterval(() => {
        currentIndex = (currentIndex + 1) % sliderCount;    // 1 2 3 4 0 1 2 3 4 0

        console.log(currentIndex)
        sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";


    }, sliderInterval)
</script>

• 선택자: document.querySelector()와 querySelectorAll() 메소드를 사용하여 슬라이더의 HTML 요소들을 선택하고, 각 요소들을 변수에 할당합니다. sliderWrap 변수는 슬라이더를 감싸는 부모 요소인 .slider__wrap을, sliderImg 변수는 이미지가 보이는 영역인 .slider__img를, sliderInner 변수는 움직이는 영역을 감싸는 .slider__inner를, slider 변수는 개별 이미지를 나타내는 .slider를 선택합니다.
• 변수 초기화: currentIndex 변수는 현재 보이는 이미지의 인덱스를 나타내고, sliderCount 변수는 이미지의 갯수를 나타냅니다. sliderInterval 변수는 슬라이더가 자동으로 전환되는 간격을 나타냅니다.
• 슬라이더 동작: setInterval() 함수를 사용하여 슬라이더가 자동으로 전환되는 로직을 구현합니다. currentIndex를 업데이트하여 다음 이미지로 전환하고, sliderInner의 transform 속성을 이용하여 이미지를 좌우로 이동시킵니다. transform 속성에는 translateX() 함수를 사용하여 현재 이미지의 인덱스에 따라 이동할 거리를 계산하여 설정합니다. sliderInterval 변수에 설정된 시간 간격마다 이 로직이 반복 실행되어 슬라이더가 자동으로 전환됩니다.

---

GSAP

 

<!-- 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(".slider__inner",{    //sliderInner 그냥 사용해도 가능
            x : -800 * currentIndex,
            duration : 1,
            ease : "elastic.out(1, 0.5)"
        })  
    },sliderInterval)
</script>

• GSAP 라이브러리 추가: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js 주소에서 GSAP 라이브러리를 가져옵니다. GSAP은 자바스크립트 기반의 애니메이션 라이브러리로, 다양한 애니메이션 효과를 쉽게 구현할 수 있도록 도와줍니다.
• 슬라이더 동작: setInterval() 함수를 사용하여 슬라이더가 자동으로 전환되는 로직을 구현합니다. currentIndex를 업데이트하여 다음 이미지로 전환하고, GSAP의 to() 메소드를 사용하여 .slider__inner 요소를 대상으로 애니메이션을 적용합니다.
• GSAP 애니메이션 설정: to() 메소드에는 대상 요소, 애니메이션의 속성, 지속시간(duration), 이징(ease) 등의 설정이 포함됩니다. 위의 코드에서는 x 속성을 이용하여 .slider__inner 요소의 가로 위치를 -800 * currentIndex로 설정하여 이미지를 좌우로 이동시킵니다. duration은 1초로 설정되어 있고, ease는 "elastic.out(1, 0.5)"로 설정되어 있어 애니메이션이 탄성 있는 움직임을 가지도록 설정됩니다.

---

jQrery

<!-- jQrery -->
<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>
    setInterval(()=>{
        currentIndex = (currentIndex + 1) % $(".slider").length;
        $(".slider__inner").css("position","relative");
        $(".slider__inner").animate({left : -800 * currentIndex},600,"easeOutElastic");
    },sliderInterval);
</script>

 

• jQuery 라이브러리 추가: https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js 주소에서 jQuery 라이브러리를 가져옵니다. jQuery는 자바스크립트 기반의 라이브러리로, DOM 조작, 이벤트 처리, 애니메이션 등을 편리하게 처리할 수 있도록 도와줍니다.
• jQuery UI 라이브러리 추가: https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js 주소에서 jQuery UI 라이브러리를 가져옵니다. jQuery UI는 jQuery를 기반으로 한 다양한 UI(사용자 인터페이스) 컴포넌트를 제공하는 라이브러리로, 예를 들어 드래그 앤 드롭, 정렬, 리사이즈 등의 기능을 제공합니다.
• 슬라이더 동작: setInterval() 함수를 사용하여 슬라이더가 자동으로 전환되는 로직을 구현합니다. currentIndex를 업데이트하여 다음 이미지로 전환하고, jQuery의 .css() 메소드와 .animate() 메소드를 사용하여 .slider__inner 요소에 애니메이션을 적용합니다.
• jQuery 메소드 사용: jQuery를 사용하여 DOM 요소에 접근하고 스타일(css)을 변경하거나 애니메이션을 적용합니다. 위의 코드에서는 .slider__inner 요소의 position 속성을 relative로 설정하고, animate() 메소드를 사용하여 left 속성을 -800 * currentIndex로 설정하여 이미지를 좌우로 이동시킵니다. 애니메이션의 지속시간은 600밀리초(0.6초)로 설정되어 있고, 이징(easing) 효과는 "easeOutElastic"으로 설정되어 있어 애니메이션이 탄성 있는 움직임을 가지도록 설정됩니다.

---