슬라이드 이펙트 7

슬라이드 효과 만들기

이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다.

슬라이드 효과 : 이미지 슬라이드(버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이)

이번 슬라이드 효과는 이전의 유형에 자동 플레이 기능을 추가하였으며,자동 플레이를 정지하거나 플레이 할 수 있는 버튼을 추가하고, 마우스 커서가 올라가면 자동 플레이가 멈추고, 커서가 빠져나가면 자동 플레이가 시작되는 기능을 추가하였습니다.

HTML 코드

슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. 여기까지는 이전 유형과 같지만, 이번에는 슬라이드를 넘길 버튼이 필요하기 때문에, slider__img 클래스의 형제 요소로 slider__btn 클래스의 div박스를 만들어 각각의 클래스가 prev, next인 a태그로 버튼을 만들어 주었습니다. 또한, 닷메뉴를 만들기 위해 slider__dot을 만들고 dot들을 만들엇습니다. dot은 스크립트를 이용해 작성해줄 예정이기 때문에 스타일을 작성한 후 주석 처리 해주었습니다.

<main id="main">
    <section id="sliderType01">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider"><img src="../assets/img/effect_img01-min.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="../assets/img/effect_img02-min.jpg" alt="이미지2"></div>
                    <div class="slider"><img src="../assets/img/effect_img03-min.jpg" alt="이미지3"></div>
                    <div class="slider"><img src="../assets/img/effect_img04-min.jpg" alt="이미지4"></div>
                    <div class="slider"><img src="../assets/img/effect_img05-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"></a>
                <a href="#" class="dot"></a>
                <a href="#" class="dot"></a>
                <a href="#" class="dot"></a>
                <a href="#" class="dot"></a> -->
            </div>
        </div>
    </section>
</main>
<!-- main -->

CSS 코드

이전 유형과 거의 동일하기 떄문에, dot 부분의 css만 작성하였습니다. 이번에는 dot 영역에 css를 이용해 플레이 버튼과 정지 버튼을 만들어 주었습니다.

/* slider__dot */
.slider__dot {
    position: absolute;
    left: 50%;
    transform: translateY(-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: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 7px;
    vertical-align: 4px;

    /* css로 삼각형 만들기~ */
    border-left: 15px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.slider__dot .stop {
    display: inline-block;
    width: 18px;
    height: 20px;
    margin-left: 7px;
    position: relative;
    vertical-align: 3px;
}
.slider__dot .stop::before {
    content: '';
    width: 6px;
    height: 18px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
}
.slider__dot .stop::after {
    content: '';
    width: 6px;
    height: 18px;
    background: #fff;
    position: absolute;
    right: 0;
    top: 0;
}

스크립트 작성하기

이미지 슬라이드를 하는 스크립트는 선택자를 만든 후, 각 이미지의 가로값을 구해 그 수치만큼 이동시킨다는 점이 이전의 유형과 같습니다. 닷메뉴를 슬라이드 순서에 맞게 활성화시키는 것과, 닷메뉴를 클릭하면 해당 슬라이드로 이동하는 점도 이전과 같으며 자동으로 넘어가는 기능이 추가되었습니다.

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),     //마지막 이미지 복사
dotIndex = "",
interval = 3000,    // 슬라이드 재생 시간 interval ms마다 넘어감
sliderTimer = "";

function init(){
    imgClone(); // 슬라이드를 복사하는 함수
    createDot();    // 닷메뉴를 만드는 함수
    autoPlay(); //슬라이드 자동 재생 함수
}
init();

const sliderPlayBtn = document.querySelector(".slider__dot #playBtn");

function autoPlay(){
    sliderTimer = setInterval(()=>{ //n초마다 실행
        let intervalNum = currentIndex + 1; // 다음 이미지로 슬라이드 하기 위해 현재 인덱스 +1 값을 변수에 저장
        gotoSlider(intervalNum);    //저장한 값을 매개변수로 함수를 실행
    }, interval);
}

function stopPlay(){
    clearInterval(sliderTimer); // 자동 재생을 멈추는 경우 setInterval 메서드를 초기화 해주어야 반복이 중복되는 것을 방지할 수 있음
}

function imgClone(){
    sliderInner.appendChild(cloneFirst);
    sliderInner.insertBefore(cloneLast, sliderFirst);
}

function createDot(){
    for(i=0; i<sliderLength; i++){
        dotIndex += `<a href="#" class="dot"></a>`;
    }
    dotIndex += `<a href="#" id="playBtn" class="play"></a>`;
    sliderDot.innerHTML = dotIndex;
    sliderDot.firstElementChild.classList.add("active");
}

function gotoSlider(index){
    sliderInner.classList.add("transition");
    let posInitial = sliderInner.offsetLeft;

    sliderInner.style.left = -sliderWidth * (index + 1) + "px";

    currentIndex = index;

    let sliderDotAcive = document.querySelectorAll(".slider__dot .dot");    // 이미지가 슬라이드 될 떄 해당하는 이미지에 active 클래스 주기
    sliderDotAcive.forEach(el => el.classList.remove("active"));
    sliderDotAcive[index].classList.add("active");
}

function checkIndex(){
    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;
    }
}

//버튼 눌렀을 떄

// 닷버튼 누르면 해당 이미지로 이동
document.querySelectorAll(".slider__dot .dot").forEach((dot, index)=>{
    dot.addEventListener("click", ()=>{
        gotoSlider(index);
    });
});

//클릭 이벤트
sliderBtnPrev.addEventListener("click", ()=>{
    let prevIndex = currentIndex -1;
    gotoSlider(prevIndex);
});
sliderBtnNext.addEventListener("click", ()=>{
    let nextIndex = currentIndex +1;
    gotoSlider(nextIndex);
});
sliderPlayBtn.addEventListener("click", ()=>{
    sliderPlayBtn.classList.toggle("play");
    sliderPlayBtn.classList.toggle("stop");
    if(sliderPlayBtn.className == "play"){  //해당 요소에 play 클래스가 있으면 자동재생을 실행, 아닌 경우에는 자동재생을 멈춤.
        autoPlay();
    } else { stopPlay(); }
});
sliderInner.addEventListener("mouseenter", stopPlay);
sliderInner.addEventListener("mouseleave", autoPlay);
sliderInner.addEventListener("transitionend", checkIndex);

원본 페이지 보기