[JavaScript] 슬라이드 구현하기 (javascript)

See the Pen slide by flowerdragon95 (@flowerdragon95) on CodePen.

0.25X 로 결과물 확인

html 과 css는 간단히 만들고 자바 스크립트 기능을 중심으로 포스팅 한다.

 

<원하는 기능>

1. 좌우에 버튼을 눌렀을때, 왼쪽 버튼을 누르면 페이지를 내리고 , 오른쪽 버튼을 누르면 페이지를 올린다. 각각 마지막 슬라이드가 될때는 제일 처음 혹은 제일 뒤 슬라이드로 보낸다. 

 

2. 가만히 있을때도 슬라이드가 4초에 한번씩 움직이도록 설정한다.

 

<코드 구현 >

먼저 변수를 설정한다. 움직일 슬라이드 , 오른쪽 왼쪽 버튼을 각각 선택해서 변수할당한다. 

또한 현재 페이지를 나타내는 변수 index 저장한다.

const slides = document.querySelectorAll(".slide"); //슬라이드 배열로 저장
const prev = document.querySelector(".prev"); // 왼쪽버튼
const next = document.querySelector(".next"); // 오른쪽 버튼
let index = 0;

 

prev, next 버튼의 클릭이 감지될 때마다 실행할 메서드를 작성한다. 

 

버튼에따라 let 변수의 값이 변한다.

현재 페이지를 나타내는 변수값을 변경하는 것이다. 마지막에 실제로 슬라이드 변경하는 changeslide 호출한다.

prev.addEventListener("click", function () {
    prevSlide();
    // 이전버튼 클릭시 prevSlide 작동
});

next.addEventListener("click", function () {
    nextSlide();
    // 다음버튼 클릭시 nextSlide 작동
});

function prevSlide() {
    if (index == 0) {
        index = slides.length - 1;
    } else {
        index--;
    }
    changeSlide();
}

function nextSlide() {
    if (index == slides.length - 1) {
        index = 0;
    } else {
        index++;
    }
    changeSlide();
}

 

변경한 변수값에 따라 슬라이드를 실제로 변경하는 changeslide 메서드를 작성한다.

active 클래스는 평상시에 display:none 걸려있는 슬라이드를 display:block 으로 나타나게 만든다.

이렇게 버튼을 클릭하여 슬라이드를 움직이는 기능은 구현했다. 이제 4초마다 자동으로 움직이는 슬라이드를 구현하자

마지막의 resetAutoplay 메서드는 수동으로 슬라이드를 움직인 경우 4초의 시간을 초기화 하는 역할을 한다.

function changeSlide() {
	// slide 에 active 클래스를 전부 제거
    slides.forEach(function (item) { 
        item.classList.remove("active");
    });
    //index 변수에 해당하는 slide 에만 active 클래스부여
    slides[index].classList.add("active"); 
    resetAutoplay();
}

 

4초마다 자동으로 움직이기 위해 setinterval 메서드 사용한다. 

//nextSlide 메서드를 4초마다 실행하도록 설정
let timer = setInterval(nextSlide, 4000);

// 수동으로 움직일 경우 시간 4초 다시 초기화 하는 메서드
function resetAutoplay() {
    clearInterval(timer);
    timer = setInterval(nextSlide, 4000);
}