Slider Effect 04

슬라이드 이펙트

이번 시간에는 슬라이드 이펙트 슬라이드(버튼) 효과에 대해 알아보겠습니다.

---

슬라이드 04

좌우로 버튼을 누르면 이미지가 미끄러지듯 이동합니다.

원본 사이트 보기 원본 소스 보기

01. HTML 코드

{
    <main id="main">
    <section id="sliderType01">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider"><img src="../assets/img/effect_bg03-min.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="../assets/img/effect_bg04-min.jpg" alt="이미지2"></div>
                    <div class="slider"><img src="../assets/img/effect_bg05-min.jpg" alt="이미지3"></div>
                    <div class="slider"><img src="../assets/img/effect_bg06-min.jpg" alt="이미지4"></div>
                    <div class="slider"><img src="../assets/img/effect_bg07-min.jpg" alt="이미지5"></div>
                </div>
            </div>
            <div class="slider__btn">
                <a href="#" class="prev">prev</a>
                <a href="#" class="next">next</a>
            </div>
        </div>
    </section>
</main>
} 

02. CSS 코드

{
    /* 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개 */
        height: 450px;
    }
    .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;
    }
    .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__btn a {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        background: rgba(0,0,0,0.4);
        text-align: center;
        line-height: 50px;
        transition: all 0.2s;
        color: #fff;
    }
    .slider__btn a:hover {
        border-radius: 50%;
        background: rgb(50, 109, 227);
    }
    .slider__btn a.prev {
        left: 0;
    }
    .slider__btn a.next {
        right: 0;
    }
}

03. script 코드

먼저 선택자를 지정해준뒤, 변수를 저장해줍니다.
gotoSlider함수를 만들어줍니다.
왼쪽과 오른쪽버튼에 대해 addEventListener를 걸어주고 함수를 실행시켜줍니다.

{
    const sliderWrap = document.querySelector(".slider__wrap");
    const sliderImg = document.querySelector(".slider__img");       //보여지는 영역
    const sliderInner = document.querySelector(".slider__inner");   //움직이는 영역
    const slider = document.querySelectorAll(".slider");            //각각 이미지
    const sliderBtn = document.querySelector(".slider__btn");            //버튼
    const sliderBtnPrev = sliderBtn.querySelector(".prev");            //왼쪽버튼
    const sliderBtnNext = sliderBtn.querySelector(".next");            //오른쪽버튼
    
    let currentIndex = 0;                       //현재이미지
    let sliderCount = slider.length;            // 이미지 갯수
    let sliderWidth = sliderImg.offsetWidth;    //이미지 가로값

    //이미지 움직이는 영역
    function gotoSlider(num){
        sliderInner.style.transition = "all 400ms";
        sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";
        currentIndex = num;
    }
    // 왼쪽 버튼 클릭
    sliderBtnPrev.addEventListener("click", ()=>{
        let prevIndex = (currentIndex + sliderCount -1) % sliderCount;
        gotoSlider(prevIndex);
    });
    //오른쪽 버튼 클릭
    sliderBtnNext.addEventListener("click", () => {
        let nextIndex = (currentIndex + 1) % sliderCount
        gotoSlider(nextIndex);
        // 0 1 2 3 4
    });
}