EFFECT | SLIDER | 버튼과 닷버튼 형식의 이미지 슬라이드

sliderEffect | 버튼과 닷버튼 형식의 이미지 슬라이드

오늘의 목표
❔problem
첫번째 이미지에서 이전 버튼을 누르면 마지막 사진으로 넘어가야 하며, 마지막 이미지에서 다음 버튼을 누르면 첫번째 사진으로 넘어가야 합니다.
❗️solve
if문을 활용하는 방법과 if문 없이 해결하는 방법이 있으며, 오늘 보여드릴 방법은 if문 없이 해결하는 방법입니다.

---

1. 사이트 구조 살펴보기

HTML 살펴보기

화면 아래 닷버튼이 추가되었습니다.

<main id="main">
    <section id="sliderType01">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider" role="group" aria-label="1/5"><img src="../assets/img/effect_bg06-min.jpg" alt="이미지1"></div>
                    <div class="slider" role="group" aria-label="2/5"><img src="../assets/img/effect_bg07-min.jpg" alt="이미지2"></div>
                    <div class="slider" role="group" aria-label="3/5"><img src="../assets/img/effect_bg08-min.jpg" alt="이미지3"></div>
                    <div class="slider" role="group" aria-label="4/5"><img src="../assets/img/effect_bg09-min.jpg" alt="이미지4"></div>
                    <div class="slider" role="group" aria-label="5/5"><img src="../assets/img/effect_bg10-min.jpg" alt="이미지5"></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>
            <div class="slider__dot">
                <!-- <a href="#" class="dot active">이미지1</a>
                <a href="#" class="dot">이미지2</a>
                <a href="#" class="dot">이미지3</a>
                <a href="#" class="dot">이미지4</a>
                <a href="#" class="dot">이미지5</a> -->
            </div>
        </div>
    </section>
</main>

CSS 살펴보기

닷버튼 디자인이 추가되었습니다.

<style>
    /* slider */
    .slider__wrap {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* 이미지 보이는 부분 */
    .slider__img {
        position: relative;
        width: 600px;
        height: 400px;
        overflow: hidden;
    }
    /* 이미지 감싸고 있는 부모 : 움직이는 부분 */
    .slider__inner {
        display: flex;
        flex-wrap: wrap;
        /* 총 이미지 6개 */
        width: 3600px;
        height: 400px;
    }
    /* 개별적인 이미지 */
    .slider {
        position: relative;
        width: 600px;
        height: 400px;
    }
    .slider img{
        width: 100%;
    }
    .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: 300px;
        }
    }

    .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;
        display: block;
        color: #fff;
    }
    .slider__btn a:hover {
        border-radius: 50%;
        background: rgba(255,255,255,0.4);
        color:#000;
    }
    .slider__btn a.prev {
        left: 0;
    }
    .slider__btn a.next {
        right: 0;
    }

    .slider__dot {
        position: absolute;
        left: 50%;
        transform: translateX(-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);
    }
</style>

2. script 살펴보기

이미지가 움직이는 영역 |
    매개변수 num을 활용하여 이미지의 가로값만큼 x축으로 이동할 수 있도록 설정해줍니다.

⇢ next 버튼 설정 |
    currentIndex 값에 1을 더한 값을 이미지 갯수로 나누어 nextIndex 값을 설정한 후, 그 값을 움직이는 영역에 대입시켜 넘어가도록 설정해주었습니다.

⇠ prev 버튼 설정 |
    이미지 총 갯수에서 하나를 뺀 값을 currentIndex에 더하고 다시 이미지 총 갯수로 나눠 prevIndex 값을 설정해주었습니다.

닷 버튼 설정 |
    이미지의 갯수에 따라 닷메뉴가 생성되도록 만들고 해당 이미지의 버튼에 활성화 표시와 클릭했을때 해당 이미지로 갈 수 있도록 설정합니다.

<script>
    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 = "";

    // 초기값 설정 함수 init()
    function init(){
        // <a href="#" class="dot active">이미지1</a>

        slider.forEach(() => {dotIndex += "<a href='#' class='dot'>이미지1</a>";});
        sliderDot.innerHTML = dotIndex;

        // 첫 번째 닷 버튼에 활성화 표시(active)
        sliderDot.firstChild.classList.add("active");
    }
    init();

    // 이미지 이동
    function gotoSlider(num){
        sliderInner.style.transition = "all 400ms";
        sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";
        currentIndex = num;

        // 두번째 이미지 == 두번째 닷에 클래스 추가
        // 닷 메뉴 클래스 모두 삭제 -> 해당 이미지의 닷 메뉴에 클래스 추가
        let dotActive = document.querySelectorAll(".slider__dot .dot");
        dotActive.forEach(el => el.classList.remove("active"));
        dotActive[num].classList.add("active");
    }

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

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

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

원본 소스 보기

실제 사이트 보기