[Javascript] Carousel

newsilver·2021년 6월 19일

JavaScript projects

Mini Web Projects

목록 보기

2/4

Carousel

TODO

✏️ 아래에 주어진 이미지와 같이 생긴 화면을 만들어 아래 요구사항의 기능을 구현해보세요.

🚨 애니메이션 효과는 필요하지 않습니다.

Day 1

페이지 로딩 시, 첫 번째 이미지 화면에 보이기
좌측, 우측 화살표 두개 보이기
화면 아래 쪽에 Dot 다섯개 보이기

Day 2

좌측 화살표 클릭시 이전 이미지 보여주기
우측 화살표 클릭시 다음 이미지 보여주기

Day 3

5번째 이미지에서 우측 화살표를 누를 경우, 1번째 이미지 보여주기
1번째 이미지에서 좌측 화살표를 누를 경우, 5번째 이미지 보여주기
이미지 하단의 Dot를 누를 경우, 해당 순번의 이미지 보여주기

script

var index = 1;
showSlides(index);

function nextSlide(n) {
    showSlides((index += n));
}

function prevSlide(n) {
    showSlides((index -= n));
}

function currentSlide(n) {
    showSlides((index = n));
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("images-wrapper");
    var dots = document.getElementsByClassName("dot");

    if (n > slides.length) {
        index = 1;
    }
    if (n < 1) {
        index = slides.length;
    }

    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className.replace("active", "");
    }

    slides[index - 1].style.display = "block";
}

리팩토링 (2021.10.06)

const $dotsWrapper = document.querySelector(".dots-wrapper");
const imagesList = document.querySelectorAll(".image");
const $prev = document.querySelector(".prev");
const $next = document.querySelector(".next");
const CLASS_NAME_HIDDEN = "hidden";

let index = 1;

function currentSlide() {
  showSlides(index);
}

for(let j = 1; j<imagesList.length+1; j++){
  const dots = document.createElement("div");
  $dotsWrapper.append(dots);
  dots.className = "dots";
  dots.addEventListener("click",function (){
    showSlides(index = j);
  })
}
const dotsList = document.querySelectorAll(".dots");
showSlides(index);

$prev.addEventListener("click", function () {
  showSlides((index -= 1));
});
$next.addEventListener("click",function () {
  showSlides((index += 1));
});

function showSlides(n) {
  if (n > imagesList.length) {
    index = 1;
  }
  if (n < 1) {
    index = imagesList.length;
  }

  for (i = 0; i < imagesList.length; i++) {
    imagesList[i].className = CLASS_NAME_HIDDEN;
  }
  
  for (i = 0; i < dotsList.length; i++) {
    dotsList[i].className = "dots";
  }
  imagesList[index - 1].className = "image";
  dotsList[index - 1].className += "active";
}