sliderEffect | 슬라이드 이펙트 01

source view

JAVASCRIPT

HTML

CSS

//탭 메뉴
const tabBtn = document.querySelectorAll(".modal__box .tabs > div");
const tabCont = document.querySelectorAll(".modal__box .cont > div");
                                
                                
                                
tabBtn.forEach((element, index) => {
    //버튼을 클릭함
    element.addEventListener("click", (event) => {
        //클릭시 초기화면으로 돌아가는 이벤트를 막아줍니다.
        event.preventDefault();

        //클래스 active를 모두 제거함
        tabBtn.forEach(li => {
            li.classList.remove("active");
        });

        //내가 클릭한 버튼에 active를 추가함
        element.classList.add("active");

        //버튼을 클릭하면 모든 자식 박스 숨김
        tabCont.forEach(div => {
            div.style.display = "none";
        });

        //[i]클릭한 버튼과 관련된 [i]박스를 보이게 함
        tabCont[index].style.display = "block";
    });
});

// 모달
const modalBtn = document.querySelector(".modal__btn");
const modalClose = document.querySelector(".modal__close");
const modalCont = document.querySelector(".modal__cont");

modalBtn.addEventListener("click", () => {
    modalCont.classList.add("show")
    modalClose.classList.add("show")
    modalCont.classList.remove("hide")
    modalClose.classList.remove("hide")
});

modalClose.addEventListener("click", () => {
    modalCont.classList.add("hide")
    modalClose.classList.add("hide")
});

// slider img
const sliderWrap = document.querySelector(".slider__wrap");    // 슬라이더 박스
const sliderImg = document.querySelector(".slider__img");    // 슬라이더 이미지
const slider = sliderWrap.querySelectorAll(".slider");    // 슬라이더

let currentIndex = 0;   // 가장 앞에 보이는 이미지를 currentIndex 라고 지정해준다.
let sliderCount = slider.length;    // 슬라이더 이미지의 갯수 (sliderCount)

setInterval(() => { // 시간을 지정해서 실행문을 실행 시킨다.
    let nextIndex = (currentIndex + 1) % 5;    // 다음 이미지는 currentIndex에 +1 값

    // 1초가 지났을 때 첫 번째 이미지를 안보이게 해주며, 두 번째 이미지를 보이게 해준다.
    slider[currentIndex].style.opacity = "0";
    slider[nextIndex].style.opacity = "1";

    currentIndex = nextIndex; // nextIndex 값을 currentIndex에 대입시켜서 다시 처음부터 실행한다.

}, 1000); // 1000 = 1초

<div class="slider__wrap">
    <div class="slider__img">
        <div class="slider"><img src="../assets/img2/effect_bg_02-min.jpg" alt="이미지1"></div>
        <div class="slider"><img src="../assets/img2/effect_bg_03-min.jpg" alt="이미지2"></div>
        <div class="slider"><img src="../assets/img2/effect_bg_04-min.jpg" alt="이미지3"></div>
        <div class="slider"><img src="../assets/img2/effect_bg_05-min.jpg" alt="이미지4"></div>
        <div class="slider"><img src="../assets/img2/effect_bg_07-min.jpg" alt="이미지5"></div>
    </div>
    </div>

/* slider */
.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
                        
.slider__img {
    position: relative;
    width: 800px;
    height: 450px;
}
                        
.slider {
    position: absolute;
    left: 0;
    top: 0;
}
                        
.slider::before {
    margin: 5px;
    padding: 7px;
    border-radius: 5px;
    position: absolute;
    left: 5px;
    top: 5px;
    background-color: rgba(34, 34, 34, 0.698);
    color: rgb(199, 199, 199);
}
                        
.slider:nth-child(1)::before {
    content: 'image 01';
}
                        
.slider:nth-child(2)::before {
    content: 'image 02';
}
                        
.slider:nth-child(3)::before {
    content: 'image 03';
}
                        
.slider:nth-child(4)::before {
    content: 'image 04';
}
                        
.slider:nth-child(5)::before {
    content: 'image 05';
}
                        
.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;
    }
}