슬라이드 이펙트 5

슬라이드 효과 만들기

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

슬라이드 효과 : 이미지 슬라이드(버튼, 닷메뉴)

이번 슬라이드 효과는 버튼을 통해 이미지 슬라이드를 넘길 수 있으며, 아래쪽에 슬라이드 갯수 만큼의 닷메뉴를 만들어 현재 활성화된 슬라이드의 순서에 맞게 표시되도록 하였습니다. 또한, 닷메뉴를 클릭하면 해당 슬라이드로 이동하는 기능도 있습니다.

HTML 코드

슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. 여기까지는 이전 유형과 같지만, 이번에는 슬라이드를 넘길 버튼이 필요하기 때문에, slider__img 클래스의 형제 요소로 slider__btn 클래스의 div박스를 만들어 각각의 클래스가 prev, next인 a태그로 버튼을 만들어 주었습니다. 또한, 닷메뉴를 만들기 위해 slider__dot을 만들고 dot들을 만들엇습니다. dot은 스크립트를 이용해 작성해줄 예정이기 때문에 스타일을 작성한 후 주석 처리 해주었습니다.

<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_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 class="slider__btn">
                <a href="#" class="prev">prev</a>
                <a href="#" class="next">next</a>
            </div>
            <div class="slider__dot">
                <!-- <a href="#" class="dot active"></a>
                <a href="#" class="dot"></a>
                <a href="#" class="dot"></a>
                <a href="#" class="dot"></a>
                <a href="#" class="dot"></a> -->
            </div>
        </div>
    </section>
</main>
<!-- main -->

CSS 코드

이전 유형과 거의 동일하기 떄문에, dot 부분의 css만 작성하였습니다.

/* slider__dot */
.slider__dot {
    position: absolute;
    left: 50%;
    transform: translateY(-50%);
    bottom: 20px;
}
.slider__dot .dot {
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.4);
    display: inline-block;
    border-radius: 50%;
    text-indent: -9999px;
    transition: all 0.3s;
    margin: 2px;
}
.slider__dot .dot.active {
    background: rgba(255, 255, 255, 0.9);
}

스크립트 작성하기

이미지 슬라이드를 하는 스크립트는 선택자를 만든 후, 각 이미지의 가로값을 구해 그 수치만큼 이동시킨다는 점이 이전의 유형과 같습니다. 이번에 추가된 점은 닷메뉴를 슬라이드 순서에 맞게 활성화시키는 것과, 닷메뉴를 클릭하면 해당 슬라이드로 이동하는 기능입니다.

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


let currentIndex = 0;   //현재 이미지의 인덱스
let sliderCount = slider.length;    //이미지 갯수
let sliderWidth = sliderImg.offsetWidth;    //이미지 가로값
let dotIndex = "";  //닷메뉴 html을 저장할 변수 생성(변수에 저장하는 과정 없이 직접 innerHTML로 만들어도 됨)


function init(){
    slider.forEach(() => dotIndex += "<a href='#' class='dot'>이미지1</a>");  //forEach()문을 통해 슬라이드의 갯수만큼 반복하여 닷메뉴 추가
    sliderDot.innerHTML = dotIndex; //해당 위치에 닷메뉴 작성
    
    //첫번째 닷에만 active추가
    sliderDot.firstChild.classList.add("active"); //firstChild : 첫번쨰 자식 요소 선택
}
init();

//이미지 이동
function gotoSlider(num){   // num : 인덱스값을 매개변수로 받아옴
    sliderInner.style.transition = "all 400ms"; // 전환효과 설정
    sliderInner.style.transform = "translateX("+ -sliderWidth*num +"px)";   // 슬라이드를 이미지의 너비만큼 이동
    currentIndex = num; // 현재 인덱스를 num 값으로 변경(이동한 슬라이드의 인덱스가 num, 즉 이동후에 보고있기 때문에 현재 인덱스가 되어야 함)
    
    //두번째 이미지를 보고있으면 두번째 이미지에 클래스 추가
    // 01. 모든 닷메뉴의 active클래스 삭제
    // 02. 해당되는 닷메뉴에 active클래스 추가
    let sliderDotAcive = document.querySelectorAll(".slider__dot .dot");
    sliderDotAcive.forEach(el => el.classList.remove("active"));
    sliderDotAcive[num].classList.add("active");
}

//버튼 클릭했을 때
document.querySelectorAll(".slider__btn a").forEach((btn, index)=>{
    btn.addEventListener("click", ()=>{
        let preIndex = (currentIndex + (sliderCount - 1)) % sliderCount;
        let nextIndex = (currentIndex + 1) % sliderCount;

        if(btn.classList.contains("prev")){
            gotoSlider(preIndex);
        } else {
            gotoSlider(nextIndex);
        }
    });
});

//닷 버튼 클릭했을 때, 이미지 이동
document.querySelectorAll(".slider__dot .dot").forEach((dot, index)=>{
    dot.addEventListener("click", ()=>{
        gotoSlider(index);
    });
});

원본 페이지 보기