[EFFECT]슬라이드 효과 - 이미지 슬라이드(버튼, dot메뉴, 무한)

슬라이드 이펙트 - 이미지 슬라이드(버튼, dot메뉴, 무한으로 움직이기)

이번 시간에는 이미지가 끊기지 않고 계속 이어져서 나오는 무한 슬라이드와 닷메뉴 버튼으로 움직이는 슬라이드를 구현해보겠습니다! 🥹

---

#1. HTML / CSS 설정하기

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

✏️ HTML 스크립트 보기

<main id="main">
    <section id="sliderType04">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider s1" role="group" aria-label="1/5">
                        <span>이미지1</span>
                        <img src="../assets/img/Mountian_bg01.jpg" alt="이미지6">
                    </div>
                    <div class="slider s2" role="group" aria-label="2/5">
                        <span>이미지2</span>
                        <img src="../assets/img/Mountian_bg02.jpg" alt="이미지7">
                    </div>
                    <div class="slider s3" role="group" aria-label="3/5">
                           <span>이미지3</span>
                        <img src="../assets/img/Mountian_bg03.jpg" alt="이미지8">
                    </div>
                    <div class="slider s4" role="group" aria-label="4/5">
                           <span>이미지4</span>
                        <img src="../assets/img/Mountian_bg04.jpg" alt="이미지9">
                    </div>
                    <div class="slider s5" role="group" aria-label="5/5">
                           <span>이미지5</span>
                        <img src="../assets/img/Mountian_bg05.jpg" alt="이미지10">
                    </div>
                </div>
            </div>

            <div class="slider__btn">
                <button href="#" class="prev" role="button" aria-label="왼쪽 이미지">prev</button>
                <button href="#" class="next" role="button" aria-label="오른쪽 이미지">next</button>
            </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>
<!-- //main -->

! CSS TIP !
1. 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 overflow: hidden을 설정해줍니다.
2. 이미지 가로 값은 이미지가 잘리지 않는 선에서 최대로 설정해주면 됩니다. 3. pointer-events: none을 통해 버튼이 연속으로 눌리지않게 합니다.

✏️ 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: 10000px; /* 스크립트로 처리할 것이므로 안깨지게 끔 width값 주면 됨 */
    height: 450px;
    position: relative;
    left: -800px; /* 슬라이더 초기값 */
}
/* 마지막에서 처음으로 순간이동 */
.slider__inner.transition {
    transition: all 0.3s;
}
.slider {   /* 개별적인 이미지 (각각의 이미지 설정) */
    position: relative;
    width: 800px;
    height: 450px;
}
.slider span {
    position: absolute;
    left: 5px;
    top: 5px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 5px 10px;
}

@media(max-width : 800px){
    .slider__img {
        width: 400px;
        height: 250px;
    }
    .slider {
        width: 400px;
        height: 250px;
    }
}
/* 슬라이드 버튼 연속으로 누를 수 없게 하기 01 */
.slider__btn.disable button{
        pointer-events: none;
    }

.slider__btn button {
    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;
    pointer-events: auto;
    border: 0;
    cursor: pointer;
}
.slider__btn button:hover {
    border-radius: 50px;
    background: rgba(38, 52, 103, 0.4);
}
.slider__btn button.prev {
    left: 0;
}
.slider__btn button.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: 3px;
}
.slider__dot .dot.active {
    background: rgba(255,255,255,0.9);
}

---

#2. JAVASCRIPT : 스크립트 짜기

cloneFirst = sliderFirst.cloneNode(true) / cloneLast = sliderLast.cloneNode(true)를 통해 첫번째 이미지와 마지막 이미지를 복사해줍니다.
매개변수와 함수를 이용하여 스크립트를 더 효과적으로 작성해줍니다.
그 외 세부적인 부분은 아래의 주석과 코드를 통해 살펴보겠습니다!

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

let currentIndex = 0,                         //현재 이미지
    sliderLength = slider.length,             //슬라이더 총 길이
    sliderWidth = slider[0].offsetWidth,      //슬라이더 가로 값
    sliderFirst = slider[0],                  //첫번째 이미지
    sliderLast = slider[sliderLength -1],     //마지막 이미지
    cloneFirst = sliderFirst.cloneNode(true), //첫번째 이미지 복사
    cloneLast = sliderLast.cloneNode(true);   //마지막 이미지 복사

sliderInner.appendChild(cloneFirst);
sliderInner.insertBefore(cloneLast, sliderFirst);

function init(){
    let dotIndex = "";
    //이미지 갯수만큼 닷 메뉴 생기도록
    for(let i=0; i<sliderLength; i++){
        dotIndex += "<a href='#' class='dot'>이미지1</a>"
        sliderDot.innerHTML = dotIndex;
        sliderDot.firstChild.classList.add("active");
    }
}
init();

//매개변수 사용 - 5번 슬라이트 이펙트 보다 세분화 시키기
function gotoSlider(direction){
    sliderInner.classList.add("transition");
    // 슬라이드 버튼 연속으로 누를 수 없게 하기 02
    sliderBtn.classList.add("disable");

    posInital = sliderInner.offsetLeft;
    // console.log(posInital);

    //direction이라는 매개변수에 -1이 들어온다면 왼쪽으로 이동(이전) 또한 1이라면 오른쪽으로 이동(다음)
    if(direction == -1){
        // sliderInner.style.left = "800px"; //왼쪽으로 800만큼 움직이기
        //부모박스 offsetLeft값을 구하여 더하는 이유는? sliderWidth는 슬라이더 하나만의 가로값이기 때문에 이동시 늘어나거나 줄어드는 값을 구할 수 없다 때문에 그 슬라이더를 감싸는 부모박스의 가로값을 구하여 늘어나는 값 만큼 길이를 더하여 추가시킨 것 이다.
        sliderInner.style.left = (posInital + sliderWidth) + "px"; //왼쪽으로 슬라이더 가로값만큼 움직이기. 슬라이더의 부모박스의 왼쪽값을 더한 이유는?
        currentIndex --;

    }else if(direction == 1){

        // sliderInner.style.left = "-800px";                
        sliderInner.style.left = (posInital - sliderWidth) + "px";               
        currentIndex ++;
    }
}

// 순간이동 이미지 슬라이드 (무한 슬라이드)
function checkIndex(){
    //슬라이드가 끝나면 transition 클래스를 다시 지워서 transition효과가 나오지 않도록 하고 이미지 순간이동 시키기
    sliderInner.classList.remove("transition"); 
    // console.log(currentIndex);

    if(currentIndex == sliderLength){
        sliderInner.style.left = -(1 * sliderWidth) + "px";
        currentIndex = 0;
    }

    if(currentIndex == -1){
        sliderInner.style.left = -(sliderLength * sliderWidth) + "px";
        currentIndex = sliderLength -1;
    }
}

//실행문
sliderBtnPrev.addEventListener("click", () => {
    gotoSlider(-1); //매개변수 direction에 값 주기
    setTimeout(() => {
        sliderBtn.classList.remove("disable");
    },300);
});
sliderBtnNext.addEventListener("click", () => {
    gotoSlider(1); //매개변수 direction에 값 주기
    setTimeout(() => {
        sliderBtn.classList.remove("disable");
    },300);
});
// 트렌지션 이벤트가 끝났을 때 일어나는 이벤트
sliderInner.addEventListener("transitionend", checkIndex);

---

#3. 결과 보기 🎉

원본 소스 보기

원본 페이지 보기