Slider Effect 04

Slider Effect 04

버튼을 눌렀을 때 좌우로 움직일 수 있게 만드는 슬라이트 이펙트를 공부해보았습니다. 첫번째에서 왼쪽을 누른다면 마지막 이미지로 이동할 수 있도록 연결도 해야합니다.

01. HTML

HTML에서는 버튼을 추가해줍니다.

💀 HTML 코드

<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>

02. Css

Css는 버튼만 추가로 만들었기 때문에, 기본은 sliderEffect03 와 똑같습니다.

💀 CSS 코드

.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;
}

03. Javascript

많은 고민이 들어간 자바스트립트입니다.

//함수 만들기
function gotoSlider(num){
    sliderInner.style.transition = "all 400ms"; //400ms 는 속도
    sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)"; // x축으로 움직이는데, -(이미지의 가로값) * 갯수 만큼 움직인다.
    currentIndex = num;
}
gotoSlider(num)

//왼쪽 버튼 클릭
sliderBtnPrev.addEventListener("click", ()=>{ //왼쪽을 클릭했을 때
    let prevIndex = ( currentIndex + (sliderCount - 1) ) % sliderCount //현재 보이는 이미지 + (이미지 갯수 -1) % 이미지 갯수
    gotoSlider(prevIndex); //실행
    // gotoSlider( 현재이미지 -1 ); 그리고 1 -> 5 으로도 가게 함
})

//오른쪽 버튼 클릭
sliderBtnNext.addEventListener("click", ()=>{ //오른쪽을 클릭했을 때
let nextIndex = ( currentIndex + 1 ) % sliderCount //(현재 보이는 이미지 + 1) % 이미지 갯수
gotoSlider(nextIndex); //실행
//0 1 2 3 4
})

💀 Javascript 코드

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
})

원본 소스 보여주기

원본 사이트 보여주기