sliderEffect05

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

버튼을 눌러서 이전과 다음 이미지로 슬라이드 되며, 닷 메뉴로도 이미지의 전환을 하는 슬라이드 효과를 만들어봅시다.

원본 소스 보기

원본 사이트

---

html

slider__btn에 prev, next 버튼을 만들어 줍니다. 닷 메뉴 추가를 위해서 slider__dot을 추가합니다.

코드보기

<main id="main">
    <section id="sliderType03">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider"><img src="../assets/img/effect_bg01-min.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="../assets/img/effect_bg02-min.jpg" alt="이미지2"></div>
                    <div class="slider"><img src="../assets/img/effect_bg03-min.jpg" alt="이미지3"></div>
                    <div class="slider"><img src="../assets/img/effect_bg04-min.jpg" alt="이미지4"></div>
                    <div class="slider"><img src="../assets/img/effect_bg05-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">이미지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

생성한 버튼과 닷 메뉴에 대한 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;
    /* 총 이미지 6개 */
    height: 450px;
    position: relative;
}

.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: '이미지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';
}

.slider:nth-child(1) {
    z-index: 5;
}

.slider:nth-child(2) {
    z-index: 4;
}

.slider:nth-child(3) {
    z-index: 3;
}

.slider:nth-child(4) {
    z-index: 2;
}

.slider:nth-child(5) {
    z-index: 1;
}

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

.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(184, 52, 37, 0.615);
}

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

js

선택자를 생성합니다. 닷 메뉴에 대한 것은 html로 클래스 명을 부여한 뒤에, 슬라이드 되면서 닷메뉴가 보이는 것에 대한 부분은 js로 진행합니다.
init() 함수 안에 닷메뉴에 생성을 진행합니다. dotIndex를 선택자를 생선한 뒤 빈문자로 만드었고, 이번에 init() 함수 안에 forEach를 이용하여 닷을 생성합니다. sliderDot으로 출력하고, 첫번째의 닷메뉴에 active를 부여합니다.
gotoSlider() 함수로 이미지의 이동을 부여합니다. dotActive를 개별적인 닷으로 선택자로 생성하고, num값인 페이지의 값에 따라서 active가 부여되고 지워지는 것을 설정합니다. 닷버튼을 클릭했을때의 전환이 이루어지는 코드도 마지막에 진행해주었습니다.

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 = '';

function init() {
    slider.forEach(() => dotIndex += "<a href='#' class='dot'>이미지1</a>");
    sliderDot.innerHTML = dotIndex;
    // 첫 번째 닷 버튼한테 활성화 표시(active)
    sliderDot.firstChild.classList.add("active");
    //sliderDot.firstElementChild.classList.add("active");
}
init(); //제일 밑에 있을때는 닷 버튼 클릭의 이동이 적용안됨

// 이미지 이동
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);
        }
    });
});

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