슬라이드 이펙트 3

슬라이드 효과 만들기

이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다.

슬라이드 효과 : 좌로 움직이기(연속적으로)

슬라이드 효과는 다수의 이미지가 있을 때, 시간이 지날 때 한장씩 슬라이드 되며 보여지도록 한 효과입니다. 이번 슬라이드 효과는 이미지가 좌우로 연속적으로 넘어가며 보여집니다. 이전에 배운 방법보다 더욱 자연스러운 느낌이 나는 효과입니다.

HTML 코드

슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다.

<div class="slider__wrap">
    <div class="slider__img">
        <div class="slider__inner">
            <div class="slider"><img src="../assets/img/effect_img01-min.jpg" alt="이미지1"></div>
            <div class="slider"><img src="../assets/img/effect_img02-min.jpg" alt="이미지2"></div>
            <div class="slider"><img src="../assets/img/effect_img03-min.jpg" alt="이미지3"></div>
            <div class="slider"><img src="../assets/img/effect_img04-min.jpg" alt="이미지4"></div>
            <div class="slider"><img src="../assets/img/effect_img05-min.jpg" alt="이미지5"></div>
        </div>
    </div>
</div>

CSS 코드

1번 이미지가 복사되어 맨 뒤에 하나 생성되는 구조이기 때문에, .slider:nth-child(6)을 작성해 줍니다.

/* slider */
.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;  /* 총 이미지 6개 */
}
.slider {           /* 개별적인 이미지 */
    position: relative;
    width: 800px;
    height: 450px;
}
.slider::before {
    position: absolute;
    left: 5px;
    top: 5px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
}
.slider:nth-child(1)::before {content: '이미지1';}
.slider:nth-child(2)::before {content: '이미지2';}
.slider:nth-child(3)::before {content: '이미지3';}
.slider:nth-child(4)::before {content: '이미지4';}
.slider:nth-child(5)::before {content: '이미지5';}
.slider:nth-child(6)::before {content: '이미지1';}

@media (max-width: 800px){
    .slider__img {
        width: 400px;
        height: 225px;
    }
}

사진 움직이기

전체 이미지를 감싼 slider__inner를 좌로 이동시켜, 사진이 좌로 넘어가는 듯한 효과를 주었습니다. 애니메이션을 주는 방법으로 javascript, GSAP, jQuery를 이용해 보았습니다. 각각의 작성법을 잘 알아두었다가 적절하게 사용해 봅시다!

Javascript를 이용하기

자바스크립트를 작성해 전체 이미지를 감싼 slider__inner를 좌로 이동시켜, 사진이 좌로 넘어가는 듯한 효과를 주었습니다.
setsetInterval() 메소드를 이용하면 n초에 한번씩 실행문이 작동되도록 할 수 있습니다.

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img");       //보여지는 영역
const sliderInner = document.querySelector(".slider__inner");   //움직이는 영역
const slider = document.querySelectorAll(".slider");            //각각의 이미지

let currentIndex = 0;                                               //현재 보이는 이미지
let sliderCount = slider.length;                                    //이미지 갯수
let sliderWidth = sliderImg.offsetWidth;                            //이미지 가로값
let sliderclone = sliderInner.firstElementChild.cloneNode(true);    //첫번째 이미지 복사
sliderInner.appendChild(sliderclone);                               //첫번째 이미지를 마지막에 넣어줌

function sliderEffect(){
    currentIndex++;
    sliderInner.style.transition = "all 0.6s"

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

    // 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(-4000px)"; //800*5
    // sliderInner.style.transform = "translateX(-4800px)"; //800*6

    //마지막 사진에 위치 했을 때
    if(currentIndex == sliderCount){
        setTimeout(()=>{
            sliderInner.style.transition = "0s";    //전환시간를 없애서 자연스럽게 바뀌도록 합니다.
            sliderInner.style.transform = "translateX(0px)";    //마지막 사진에 위치했을 때 첫번째 사진으로 돌아오도록 합니다.
        },700); //n초의 딜레이 후 실행문이 작동되도록 합니다.
        currentIndex = 0;   //인덱스 값 또한 처음(0)부터 다시 증가되도록 합니다.
    }
}
setInterval(sliderEffect, 2000);

원본 페이지 보기