슬라이드 이펙트 07

슬라이더 이펙트_07

닷 메뉴를 클릭하면 해당 이미지로 이동하고 플레이/정지 클릭 여부에 따라 슬라이드를 멈춰주는 예제를 만들어보도록 하겠습니다~ 👩🏻‍💻

---

HTML 코드

HTML 코드는 크게 신경쓸것이 없으나,
슬라이드를 구현하기 위해 하단과 같이 코드를 작성해 뼈대를 생성해줍시다 🏄‍♂️

<main id="main">
    <section id="sliderType01">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider s1"><span>이미지1</span><img src="../../assets/slider/effect_img_01@2x.jpg" alt="이미지1"></div>
                    <div class="slider s2"><span>이미지2</span><img src="../../assets/slider/effect_img_02@2x.jpg" alt="이미지2"></div>
                    <div class="slider s3"><span>이미지3</span><img src="../../assets/slider/effect_img_03@2x.jpg" alt="이미지3"></div>
                    <div class="slider s4"><span>이미지4</span><img src="../../assets/slider/effect_img_04@2x.jpg" alt="이미지4"></div>
                    <div class="slider s5"><span>이미지5</span><img src="../../assets/slider/effect_img_05@2x.jpg" alt="이미지5"></div>
                    <!-- <div class="slider"><img src="../../assets/slider/effect_img_06@2x.jpg" alt="이미지5"></div> -->
                </div>
            </div>
            <div class="slider__btn">
                <button href="#" class="prev">prev</button>
                <button href="#" class="next">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>

---

CSS 코드 : 애니메이션

CSS를 통해 각각 dot과 active 클래스를 생성해 슬라이드 닷 까지 구성해줍니다. 👀

/* slider */
    .slider__wrap {
        /* background: #000; */
        width: 100%;
        height: 100vh;
        /* background-color: #ccc; */
        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; /* 총 이미지 6개 */
        height: 450px;
        position: relative;
        left: -800px;
        user-select: none;
    }
    .slider__inner.transition{
        transition: all 0.3s;
    }

    .slider { /* 개별적인 이미지 */
        width: 800px;
        height: 450px;
        position: relative;
    }

    .slider span{
        position: absolute;
        left: 5px;
        top: 5px;
        background: rgba(0,0,0,0.4);
        color: #fff;
        padding: 5px 10px;
        /* border-radius: 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";} */

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

    .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.25s;
        display: block;
        color: #fff;
        pointer-events: auto;
        border: 0;
        cursor: pointer;
    }

    .slider__btn button.disable button{
        pointer-events: none;
    }

    .slider__btn button:hover{
        background: rgb(38, 93, 133);
    }
    .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(255, 255, 255, 0.4);
        /* border-radius: 50%; */
        transform: scale(0.6) rotate(45deg);;
        display: inline-block;
        text-indent: -9999px;
        transition: all 0.3s;
        margin: 3px;
        box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.386);
    }
    .slider__dot .dot.active{
        background: rgba(255,255,255,0.9);
        transform: scale(1.1) rotate(45deg);
        margin-right: 13px;
    }

    .slider__dot .play{
        display: inline-block;
        width: 23px;
        height: 20px;
        margin-left: 5px;
        vertical-align: -8px;

        border-left : 15px solid #fff;
        border-top : 10px solid transparent;
        border-bottom : 10px solid transparent;
    }
    .slider__dot .stop{
        display: inline-block;
        width: 23px;
        height: 20px;
        position: relative;
        vertical-align: -8px;
    }

    .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;
        left: 10px; top: 0;
    }

---

JS 코드 : split 기준으로 한글자씩 span으로 감싸주기!

1. 첫번째 이미지(appendChild)와 마지막 이미지(insertBefore)를 복사해서 넣고 슬라이드 이동시 자연스러운 이동을 지원합니다. 2. 플레이/정지 버튼은 클릭 여부에 따라 autoPlay,stopPlay 함수를 실행시켜줍니다. 3. stopPlay 클릭시 clearInterval(sliderTimer) 를 통해 setInterval로 인한 시간 흐름을 초기화 및 멈춰주고 4. autoPlay 클릭시 setInterval를 통해 슬라이드를 자동으로 넘겨줍니다. 5. addEventListener를 통해 mouseenter/mouseleave로 마우스를 올릴때는 슬라이드 재생을 멈춰주고 마우스를 빼낼때에는 슬라이드 재생을 시작해줍니다. 6. forEach를 통해 dot 메뉴에 모든 active를 지워준 뒤 자기가 누른 index 값에 위치한 dot에 active를 걸어주고 해당 index 번쨰 이미지로 이동을 시켜줍니다.

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),      //마지막 이미지 복사

        dotIndex = "",
        interval = 2000,
        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=1; i<=slider.length; i++){
            dotIndex += "<a href='#' class='dot'>이미지"+i+"</a>";
        }
        dotIndex += "<a href='#' class='play' style='display:none'></a>"
        dotIndex += "<a href='#' class='stop'></a>"
        // dotIndex += "<a href='#' class='stop'></a>"

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

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

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

        currentIndex = index;

        let sliderDotAcive = document.querySelectorAll(".slider__dot .dot");
        sliderDotAcive.forEach(el => el.classList.remove("active"));
        sliderDotAcive[index].classList.add("active");
    }

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

    sliderInner.addEventListener("mouseenter", stopPlay);
    sliderInner.addEventListener("mouseleave", autoPlay);
    sliderInner.addEventListener("transitionend", checkIndex)
    
    document.querySelectorAll(".slider__dot .dot").forEach((dot, index)=>{
        dot.addEventListener("click", ()=>{
            gotoSlider(index);
        });
    });

    document.querySelector(".slider__dot .play").addEventListener("click", ()=>{
        autoPlay();
        document.querySelector(".slider__dot .play").style.display="none";
        document.querySelector(".slider__dot .stop").style.display="inline-block";
    });

    document.querySelector(".slider__dot .stop").addEventListener("click", ()=>{
        stopPlay();
        document.querySelector(".slider__dot .play").style.display="inline-block";
        document.querySelector(".slider__dot .stop").style.display="none";
    });

결과

느무느무 믓즈인~~~~~ 슬라이드 이펙트 07번 완승~~~💃🏻

---

원본 소스 보기

원본 페이지 보기