웹디자인기능사 실기 연습_슬라이더 이펙트 좌로움직이기

웹디자인기능사 실기 연습_슬라이더 이펙트 좌로움직이기

 

 

기본 세팅 정보는 아래 링크를 통해 확인해주세요~!

웹디자인기능사 실기 연습_슬라이더 이펙트 트랜지션 효과

 

💜 슬라이더 이펙트 02

코드 보기 / 완성 화면

 

 

기본 세팅은 위의 링크정보와 같습니다.

 

이번 포스팅에서는 달라진 점만 정리해보도록하겠습니다.

 

main

<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="이미지1"></div>
                <div class="slider"><img src="./img/sliderEffect07-min.jpg" alt="이미지2"></div>
                <div class="slider"><img src="./img/sliderEffect08-min.jpg" alt="이미지3"></div>
                <div class="slider"><img src="./img/sliderEffect09-min.jpg" alt="이미지4"></div>
                <div class="slider"><img src="./img/sliderEffect10-min.jpg" alt="이미지5"></div>
            </div>
        </div>
    </div>
</main>
<!-- //main -->

우선 사진이 전체적으로 움직이게 해줘야 하기 때문에

slider__inner를 만들어 그 안에 img를 넣어줬습니다.

 

style

<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 {  /* 이미지 움직이는 영역 = 전체 이미지를 감싸고있는 부모 : 움직이는 영역 */
        display: flex;
        flex-wrap: wrap;
        width: 4000px;
        height: 450px;
    }
    .slider {  /* 개별적인 이미지 */
        position: relative;
        width: 800px;
        height: 450px;
    }
</style>

overflow:hidden으로

지정된 사이즈의 다른곳은 이미지가 나오지 않게 해줍니다.

 

display: flex,flex-wrap: wrap으로 이미지가 일자로 나오게 해줍니다.

 

 

선택자

// 선택자
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;           //이미지 변경 간격 시간

slider__inner의 선택자도 추가해줍니다.

 

 

script

//javascript
//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
//sliderInner.style.transform = translateX("-0px");       //-800 * 0

//트랜지션 설정
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);

슬라이더 이미지가 전환 될 때 자연스럽게 전환되는 효과를 주기 위해

transiton을 사용해

애니메이션 효과를 넣어줍니다.

 

translateX함수를 사용해 슬라이더 이미지를 이동시킵니다.

-800 * currentIndex 값은 현재 보여지고 있는 이미지의 인덱스에 따라 슬라이더 이미지를 -800px 만큼 이동시키는 값으로 currentIndex값이 바뀔 때마다 슬라이더 이미지가 이동하여 다음 이미지가 보여지게 합니다.

 

 

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", {
             x : -800 * currentIndex,
             duration : 1,
            ease: "elastic.out(1, 0.3)"
         })

     }, sliderInterval);
</script>

GSAP 라이브러리를 사용해 애니메이션 효과를 추가하고

작업해줍니다.

 

여기서는 그냥 x만 적어줘도 값을 가져옵니다.

 

gsap.to()메서드를 사용해 슬라이더 이미지를 이동시킵니다.

첫 번째 인자로 이동시킬 요소의 선택자를 전달

slider__inner 클래스를 가진 요소를 선택

 

두번째 인자로 이동시킬 속성을 설정

X속성을 사용해 요소를 가로 축 방향으로 이동

-800 * currentIndex 값은 현재 보여지고 있는 이미지의 인덱스에 따라 슬라이더 이미지를 -800px만틈 이동시키는 값

 

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>
    setInterval(() => {
        currentIndex = (currentIndex + 1) % $(".slider").length;

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

    }, sliderInterval);
</script>

jQuery 3.6.0 버전과 jQuery UI 1.13.2 버전을 사용합니다.

 

일정한 시간마다 슬라이더 이미지가 전환되도록 설정

 

이전코드와 마찬가지로

변수를 1씩 증가시켜 슬라이더 이밎가 전환될 때 마다 새로운 값으로 설정해줍니다.

 

 

다음은 위로 움직이는 슬라이더로 변경해봤습니다.

다음 포스팅을 확인해보세요~!