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

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

이번 시간에는 지금까지 했던 슬라이드 실습을 모두 응용한 최종적인 슬라이드를 구현해보겠습니다. 🥹 모두 고생많으셨습니다! 🫠🫠🔥

---

#1. HTML / CSS 설정하기

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

✏️ HTML 스크립트 보기

<section id="sliderType07">
    <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>
            <a href="#" class="play">재생</a>
            <a href="#" class="stop">정지5</a> -->
        </div>
    </div>
</section>

! 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 {
    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);
}
.slider__dot .play {
    display: none;
    /* display: inline-block; */
    width: 23px;
    height: 20px;
    margin-left: 7px;
    vertical-align: -4px;

    border-left: 14px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.slider__dot .stop {
    display: none;
    /* display: inline-block; */
    width: 16px;
    height: 20px;
    vertical-align: -4px;
    position: relative;
}
.slider__dot .stop::before {
    content: '';
    width: 5px;
    height: 20px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
}
.slider__dot .stop::after {
    content: '';
    width: 5px;
    height: 20px;
    background: #fff;
    position: absolute;
    right: 0;
    top: 0;
}
.slider__dot .show {
    display: inline-block;
}

---

#2. JAVASCRIPT : 스크립트 짜기

cloneFirst = sliderFirst.cloneNode(true) / cloneLast = sliderLast.cloneNode(true)를 통해 첫번째 이미지와 마지막 이미지를 복사해줍니다.
setInterval 함수를 통해 자동 슬라이드를 구현해줍니다. 또한 clearInterval를 통해 자동 플레이를 멈추게 해줍니다. 그 외 세부적인 부분들은 코드와 주석을 보며 알아봅시다!

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");    //오른쪽 버튼
// const sliderBtnPlay = document.querySelector(".slider__dot .play");    //플레이 버튼
// const sliderBtnStop = document.querySelector(".slider__dot .stop");    //정지 버튼

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);   //마지막 이미지 복사
let dotIndex = ""; //닷 생성시킬 문자열
let interval = 3000;
let sliderTimer = "";


function init(){
    imgClone();     // 이미지 복사 바로 실행시키기
    createDot();    // 닷 버튼 생성시키기
    // autoPlay();     // 자동플레이
}
init();



// 자동플레이 함수
function autoPlay(){
    sliderTimer = setInterval(() => {
        let intervalNum = currentIndex + 1; //매개변수 값
        gotoSlider(intervalNum);
    }, interval);
}

function stopPlay(){
    clearInterval(sliderTimer);
}

// 이미지 복사 함수
function imgClone(){
    sliderInner.appendChild(cloneFirst);
    sliderInner.insertBefore(cloneLast, sliderFirst);
}

// 닷 버튼 생성 함수
function createDot(){
    for(let i=0; i<sliderLength; i++){
        dotIndex += "<a href='#' class='dot'>이미지1</a>";
    }
    dotIndex += "<a href='#' class='play show'></a>";
    dotIndex += "<a href='#' class='stop'></a>";

    sliderDot.innerHTML = dotIndex;
    sliderDot.firstChild.classList.add("active");

    //닷 버튼 움직이기
    // sliderDot.forEach((e, i) => {cu
    //     if(e.classList.){}
    // });
    const dotActive = document.querySelectorAll(".slider__dot .dot");
    document.querySelectorAll(".slider__dot .dot").forEach((dot, index)=>{
        dot.addEventListener("click", ()=>{
            dotActive.forEach(el => el.classList.remove("active"));
            dotActive[index].classList.add("active");
            gotoSlider(index);
        });
    });
}



// 슬라이드 함수
function gotoSlider(index){
    sliderInner.classList.add("transition");
    let posInitial = sliderInner.offsetLeft; // -800px

    // 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 ++;
    // }
    
    // 위 식을 간편하게 작업
    sliderInner.style.left = -sliderWidth * (index + 1) + "px";

    currentIndex = index;
}

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

    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" ,() => {
    let prevIndex = currentIndex - 1;
    gotoSlider(prevIndex); //매개변수로 전달
});
sliderBtnNext.addEventListener("click" ,() => {
    let nextIndex = currentIndex + 1;
    gotoSlider(nextIndex); //매개변수로 전달
});
document.querySelector(".slider__dot .play").addEventListener("click", () => {
    document.querySelector(".play").classList.remove("show");
    document.querySelector(".stop").classList.add("show");
    autoPlay(); 
});
document.querySelector(".slider__dot .stop").addEventListener("click", () => {
    document.querySelector(".stop").classList.remove("show");
    document.querySelector(".play").classList.add("show");
    stopPlay(); 
});
sliderInner.addEventListener("transitionend", checkIndex);

---

#3. 결과 보기 🎉

원본 소스 보기

원본 페이지 보기