슬라이드 이펙트06

이미지1

이미지2

이미지3

이미지4

이미지5

소스 보기

Javascript

HTML

CSS

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 = document.querySelector(".prev");           //왼쪽버튼
const sliderBtnNext = document.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
    //4 3 2 1 0
    gotoSlider(prevIndex);
});

//오른쪽 버튼 클릭
sliderBtnNext.addEventListener("click", ()=>{
    let nextIndex = (currentIndex + 1) % sliderCount
    gotoSlider(nextIndex);
    // 0 1 2 3 4
});

<main id="main">
    <section id="sliderType02">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider" role="group" aria-label="1/5"><img src="../effect/img/effect_sub01-min.jpg" alt="슬라이드 이미지1"></div>
                    <div class="slider" role="group" aria-label="2/5"><img src="../effect/img/effect_sub02-min.jpg" alt="슬라이드 이미지2"></div>
                    <div class="slider" role="group" aria-label="3/5"><img src="../effect/img/effect_sub03-min.jpg" alt="슬라이드 이미지3"></div>
                    <div class="slider" role="group" aria-label="4/5"><img src="../effect/img/effect_sub04-min.jpg" alt="슬라이드 이미지4"></div>
                    <div class="slider" role="group" aria-label="5/5"><img src="../effect/img/effect_sub05-min.jpg" alt="슬라이드 이미지5"></div>
                </div>
            </div>
        </div>
        <div class="slider__btn">
            <a href="#" class="prev" role="button" aria-label="왼쪽 이미지">prev</a>
            <a href="#" class="next" role="button" aria-label="오른쪽 이미지">next</a>
        </div>
    </section>
</main>