[html, css, js] 초간단 자동 슬라이드 (캐러셀) 만들기

참고를 위한 이미지

 

 

1. 수동 슬라이드 배너 만드는 방법은 지난 포스팅 참고

https://stukkifather.tistory.com/51

[html, css, js] 초간단 슬라이드 배너 (캐러셀) 만들기

 

 

2. 자동 슬라이드를 만들어보자

1) 기존에 만들어둔 함수를 활용

2) setInterval 함수를 활용, 2초마다 넘어가고 마지막 장이면 처음으로 돌아가도록 세팅

    setInterval(()=>{

        if(currentSlide !== slideLangth -1){

            moveSlide(currentSlide +1);

        } else {

            moveSlide(0);

        }

    },2000)

3) 스크립트 전문

<script>

    const slideFrame = document.querySelector('.slide_frame')

    const prevBtn = document.querySelector('.prev')

    const nextBtn = document.querySelector('.next')

    const slides = document.querySelectorAll('.slide_item img')

    const slideLangth = slides.length;

    let currentSlide = 0;

    const moveSlide = (num)=>{

        slideFrame.style.transform = `translateX(${-num * 400}px)`

        currentSlide = num;

    }

    prevBtn.addEventListener('click', ()=>{

        if(currentSlide !== 0){

            moveSlide(currentSlide -1);

        }

    })

    nextBtn.addEventListener('click', ()=>{

        if(currentSlide !== slideLangth -1){

            moveSlide(currentSlide +1);

        }

    })

    setInterval(()=>{

        if(currentSlide !== slideLangth -1){

            moveSlide(currentSlide +1);

        } else {

            moveSlide(0);

        }

    },2000)

 

3. 완성