Slider Effect - 무한, 버튼 추가, 닷 버튼, 자동 플레이, 시작 버튼, 정지 버튼

 

	const sliderWrap = document.querySelector(".slider__wrap");
        const sliderImg = document.querySelector(".slider__img");       
        const sliderInner = document.querySelector(".slider__inner");   
        const slider = document.querySelectorAll(".slider");           
        const sliderBtn = document.querySelector(".slider__btn");        
        const sliderBtnPrev = sliderBtn.querySelector(".prev");        
        const sliderBtnNext = sliderBtn.querySelector(".next");        
        const sliderDot = document.querySelector(".slider__dot"); 

        let currentIndex = 0;
        let sliderWidth = sliderImg.offsetWidth;        //이미지 가로값
        let sliderLength = slider.length;               //이미지 갯수
        let slideFirst = slider[0];                    //첫 번째 이미지
        let slideLast = slider[sliderLength - 1];      //마지막 이미지
        let cloneFirst = slideFirst.cloneNode(true);   //첫 번째 이미지 복사
        let cloneLast = slideLast.cloneNode(true);     //마지막 이미지 복사  제이쿼리 = clone 메소드
        let posInitial ="";
        let dotIndex = "";
        let sliderTimer = "";
        let interval = 1000;

        //이미지 복사 appendTo//prependYo // append//prepend
        sliderInner.appendChild(cloneFirst);
        sliderInner.insertBefore(cloneLast, slideFirst);

        function gotoSlider(index){
            sliderInner.classList.add("transition");
          
            sliderInner.style.left = -sliderWidth * (index+1) + "px";

            console.log(currentIndex);
            currentIndex = index;
            dotActive();
        };

        function dotInit(){
            for(let i=0; i<sliderLength; i++){
                dotIndex += "<a href='#' class='dot'></a>";
            };
            dotIndex += "<a href='#' class='play'></a>";
            dotIndex += "<a href='#' class='stop show'></a>";
            sliderDot.innerHTML = dotIndex;
            sliderDot.firstElementChild.classList.add("active");
        };
        //닷 버튼 활성화
        function dotActive(){
            let dotAll = document.querySelectorAll(".slider__dot .dot");
            dotAll.forEach(dot => {     //전체 닷 메뉴 비활성화
                dot.classList.remove("active");
            });

            //마지막 이미지 왔을 때
            if(currentIndex == sliderLength){   
                dotAll[0].classList.add("active");
            } else if (currentIndex == -1){            
                dotAll[sliderLength -1].classList.add("active");//처음 이미지 왔을 때
            } else {
            //현재 보고 있는 이미지 닷 활성화
                dotAll[currentIndex].classList.add("active");
            }
        }
        dotInit();

        function autuPlay(){
            sliderTimer = setInterval(() => {
                gotoSlider(currentIndex + 1);
            }, interval);
        };

        autuPlay();

        function stopPlay(){
            clearInterval(sliderTimer);
        };
        

        sliderBtnPrev.addEventListener("click", () => {
            let prevIndex = currentIndex -1;
            gotoSlider(prevIndex);
        });

        sliderBtnNext.addEventListener("click", () => {
            let nextIndex = currentIndex + 1;
            gotoSlider(nextIndex);
        });

        sliderInner.addEventListener("transitionend",  () => {
            sliderInner.classList.remove("transition");

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

        sliderInner.addEventListener("mouseenter", () => {
            stopPlay();
        });
        sliderInner.addEventListener("mouseleave", () => {
            if(document.querySelector(".play").classList.contains("show")){
                stopPlay();
            } else {
                autuPlay();
            }
           
        });
        
    
        document.querySelector(".play").addEventListener("click", () => {
            document.querySelector(".play").classList.remove("show");
            document.querySelector(".stop").classList.add("show");
            autuPlay();
        });
        document.querySelector(".stop").addEventListener("click", () => {
            document.querySelector(".stop").classList.remove("show");
            document.querySelector(".play").classList.add("show");
            stopPlay();
        });

 

이미지 슬라이드 사이트입니다.

강력새로고침(Ctrl + shift + R)을 하시면 올려놓은 슬라이드가 잘 실행되실거에요!

이미지에 마우스를 올리면 이미지 슬라이드가 멈추도록 만들었고 닷버튼쪽에 플레이버튼과 정지버튼을 만들었어요!

 

참조사이트

https://parkjongho1.github.io/webs_ho/javascript/effect/sliderEffect08.html

슬라이드 이펙트8