ss SLIDER Effect 05
본문 바로가기
JAVASCRIPT Effect

SLIDER Effect 05

by 꿈나무개발 2022. 10. 23.
728x90

슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴)

next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. 아래에 닷메뉴도 추가되었는데, 닷버튼을 하나씩 클릭하면 해당 슬라이드로 이동합니다.

원본 소스 보기 원본 사이트 보기

자바스크립트 방식

슬라이드 효과를 위한 자바스크립트 작성법입니다. next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. 자세한 설명은 아래를 참고해 주세요~! 

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");   // 닷메뉴

let currentIndex = 0                            // 현재 이미지
let sliderCount = slider.length;                // 이미지 갯수
let sliderWidth = sliderImg.offsetWidth;        // 이미지 가로값
let dotIndex = "";

function init() {
    // <a href="#" class="dot active">이미지1</a>

    slider.forEach(() => dotIndex += "<a href='#' class='dot'>이미지1</a>");    // forEach 한 줄 버전!! 빈문자열인 dotIndex에 dot 넣어주기
    sliderDot.innerHTML = dotIndex;     // 닷메뉴 선택자에 dotIndex 저장

    // 첫 번째 닷 버튼에 활성화 표시(active)
    sliderDot.firstChild.classList.add("active")    //firstElementChild 써도 됩니다
}
init();

// 이미지 이동
function gotoSlider(num) {
    sliderInner.style.transition = "all 400ms"; // 4초마다 이동
    sliderInner.style.transform = "translateX(" + -sliderWidth * num + "px)";   // 가로로 움직이니까 translateX, -sliderWidth * num만큼 이동
    currentIndex = num; // 현재 이미지에 num 입력

    // 두번째 이미지를 보면 두번째 닷에 클래스 추가
    let dotActive = document.querySelectorAll(".slider__dot .dot"); // 개별의 닷메뉴
    dotActive.forEach(el => el.classList.remove("active")); // 1. 닷메뉴 클래스 모두 삭제
    dotActive[num].classList.add("active"); // 2. 해당 이미지의 해당 닷메뉴에 클래스 추가
}

// 버튼 클릭했을 때(prev, next 버튼 4번에서는 각각 했지만 한 번에 적는법!)
document.querySelectorAll(".slider__btn a").forEach((btn, index) => {       // 버튼이 두개니까 querySelectorAll
    btn.addEventListener("click", () => {                                   // 버튼을 클릭하면
        let prevIndex = (currentIndex + (sliderCount - 1)) % sliderCount;   // 이전이미지 => 첫 번째 이미지로 왔을 때 다시 마지막 이미지로 이동
        let nextIndex = (currentIndex + 1) % sliderCount;                   // 다음이미지

        if (btn.classList.contains("prev")) {      // 만약 버튼에 prev라는 class가 있으면
            gotoSlider(prevIndex);                 // 이전 이미지로 이동하는 함수 실행
        } else {
            gotoSlider(nextIndex);                 // 아니라면 다음 이미지로 이동하는 함수 실행
        }
    })
})

// 닷 버튼 클릭했을 때 해당 닷버튼의 이미지로 이동
document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {        // 위에서 이미 쓴 선택자지만 지역변수라 못 씀
    dot.addEventListener("click", () => {
        gotoSlider(index);
    })
})
728x90
반응형

'JAVASCRIPT Effect' 카테고리의 다른 글

SLIDER Effect 07  (1) 2022.10.23
SLIDER Effect 06  (1) 2022.10.23
PARALLAX Effect 07  (3) 2022.10.10
PARALLAX Effect 06  (2) 2022.09.29
Mouse Effect 06  (2) 2022.09.29

관련글

댓글

HTML

HTML

자세히보기
CSS

CSS

자세히보기
JAVASCRIPT

JAVASCRIPT

자세히보기
광고 준비중입니다.

티스토리툴바