슬라이드 이펙트 04

prev next

소스 보기

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
    gotoSlider(prevIndex);
    // gotoSlider( 현재이미지 -1 ); 그리고 1 -> 5 으로도 가게 함
})


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

<div class="slider__wrap">
    <div class="slider__img">
        <div class="slider__inner">
            <div class="slider"><img src="../../assets/silde/min_jelly/slide_main_02-min.jpg" alt="이미지1"></div>
            <div class="slider"><img src="../../assets/silde/min_jelly/slide_main_08-min.jpg" alt="이미지2"></div>
            <div class="slider"><img src="../../assets/silde/min_jelly/slide_main_05-min.jpg" alt="이미지3"></div>
            <div class="slider"><img src="../../assets/silde/min_jelly/slide_main_03-min.jpg" alt="이미지4"></div>
            <div class="slider"><img src="../../assets/silde/min_jelly/slide_main_07-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>

.slider__btn a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.4);
    text-align: center;
    transition: all 0.2s;
    display: block;
    color: #fff;
    line-height: 50px;
    border-radius: 10%;
}
.slider__btn a:hover {
    background-color: rgba(130, 121, 255, 0.541);
}
.slider__btn a.prev {
    left: 0;
}
.slider__btn a.next {
    right: 0;
}