슬라이드 효과 - 이미지 슬라이드(버튼, dot메뉴)

 

슬라이드 이펙트 - 이미지 슬라이드(버튼, dot메뉴)

이번 시간에는 자동으로 넘어가지 않고 버튼과 닷 메뉴를 클릭했을 때 해당 순서로 이미지가 넘어가도록 구현해보겠습니다! 🥹

---

#1. HTML / CSS 설정하기

! HTML TIP !
각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다.
또한 버튼 아래 닷메뉴 구조를 추가해주었습니다. 닷 메뉴는 스크립트로 구현할 것이므로 주석처리를 해줍니다.

✏️ HTML 스크립트 보기

<section id="sliderType05">
    <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/Mountian_bg01.jpg" alt="이미지6">
                </div>
                <div class="slider" role="group" aria-label="2/5">
                    <img src="../assets/img/Mountian_bg02.jpg" alt="이미지7">
                </div>
                <div class="slider" role="group" aria-label="3/5">
                    <img src="../assets/img/Mountian_bg03.jpg" alt="이미지8">
                </div>
                <div class="slider" role="group" aria-label="4/5">
                    <img src="../assets/img/Mountian_bg04.jpg" alt="이미지9">
                </div>
                <div class="slider" role="group" aria-label="5/5">
                    <img src="../assets/img/Mountian_bg05.jpg" alt="이미지10">
                </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>

! CSS TIP !
1. 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 overflow: hidden을 설정해줍니다.
2. 이미지가 연속적으로 움직일 수 있도록 첫번째 이미지를 6번째에 추가로 넣습니다. (애니메이션 설정은 스크립트 파트에서!!)
3. 마찬가지로 이미지가 6장이기 때문에 inner의 가로 크기를 +하여 4800px로 설정합니다.
4. 닷 메뉴 스타일을 지정해줍니다.

✏️ CSS 스크립트 보기

/* slider */
.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img {  /* 이미지가 보이는 영역 */
    position: relative;
    width: 800px;
    height: 450px;
    overflow: hidden;
}
.slider__inner {/* 전체 이미지를 감싸고 있는 부모 : 움직이는 부분 속성주기 */
    display: flex;
    flex-wrap: wrap;
    width: 4800px; /* 총 여섯개의 이미지 */
    height: 450px;
}
.slider {   /* 개별적인 이미지 (각각의 이미지 설정) */
    position: relative;
    width: 800px;
    height: 450px;
}
.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: '이미지6';}
.slider:nth-child(2)::before {content: '이미지7';}
.slider:nth-child(3)::before {content: '이미지8';}
.slider:nth-child(4)::before {content: '이미지9';}
.slider:nth-child(5)::before {content: '이미지10';}
.slider:nth-child(6)::before {content: '이미지6';}

@media(max-width : 800px){
    .slider__img {
        width: 400px;
        height: 250px;
    }
    .slider {
        width: 400px;
        height: 250px;
    }
}

.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: 50px;
    background: rgba(38, 52, 103, 0.4);
}
.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);
}

---

#2. 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= sliderBtn.querySelector(".prev"); // 왼쪽버튼
    const sliderBtnNext = sliderBtn.querySelector(".next"); // 오른쪽 버튼
    const sliderDot = document.querySelector(".slider__dot"); // 닷메뉴

    let currentIndex = 0;                       //현재 이미지
    let sliderCount = slider.length;            //이미지 갯수
    let sliderWidth = sliderImg.offsetWidth;    //이미지 가로값

    let dotIndex = "";
    
    function intit(){
        // dot 만들어주기!
        // slider.forEach(() => {
        //     dotIndex += "<a href='#' class='dot'>이미지1</a>";
        // });
        // dot 만들어주기!
        slider.forEach(() => dotIndex += "<a href='#' class='dot'>이미지1</a>");
        sliderDot.innerHTML = dotIndex;

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

    }
    intit();

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


        //두번재 이미지에서 두번째 닷 버튼 활성화 (탭 메뉴와 원리 동일)
        //1. 닷 메뉴의 클래스를 모두 삭제
        //2. 해당 이미지의 해당 닷 메뉴에 클래스 추가
        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);
            }
        });
    });

    //dot 메뉴를 클릭할 때 이미지 이동 작동시키기
    document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {
        dot.addEventListener("click", () => {
            gotoSlider(index);
        });
    });

    //자바스크립트는 순서댜로 진행되므로 실행문이 맨 밑에 있어서 나오지 않은 것.
}

---

#3. 결과 보기 🎉

원본 소스 보기

원본 페이지 보기