Written by Lee Jongseo
on April 27, 2021

Code Piece 2

CSS 변수와 Javascript를 이용하여 스타일 동적으로 바꾸기

css 변수 선언

.carousel-slides {
    --currentSlide: 0;
    transform: translateX(calc(var(--currentSlide) * 100%));
}

x축으로 -100%만큼 이동, 즉 왼쪽으로 .carousel-slides의 width만큼 이동.

currentSlide라는 css변수를 선언하여 값을 동적으로 부여해야 한다.

javascript에서 동적으로 값 설정

const $carouselSlides = document.querySelector(".carousel-slides")
let currentSlide = 0; // 자바스크립트 변수 생성

// element.style.setProperty()를 통해서 css변수에 접근하여 값을 할당
function move(to) {
    $carouselSlides.style.setProperty("--currentSlide", to)
} 

// 클릭 시, currentSlide를 증가시킨다.
$carouselSlides.addEventListener("click", e => {
    move(++currentSlide)
})

Carousel 만들기

css의 transform 이용

transform: translateX()를 이용하여 slides wrapper div를 이동시킨다.

이미지의 width가 전부 다르기 때문에 보이는 부분의 width도 동적으로 바뀌어야 하는데 이 부분이 살짝 복잡하다.

<div class="carousel">
    <div class="carousel-slides">
        <img src="이미지URL" />
        <img src="이미지URL" />
        <img src="이미지URL" />
        <img src="이미지URL" />
        <img src="이미지URL" />
    </div>
</div>

.carousel {
  position: relative;
  margin: 0 auto; /* 가운데 정렬 */ 
  overflow: hidden;
}

.carousel-slides {
  --currentWidth: 0;
  display: flex;
  transition: all 1s;
  transform: translateX(calc(-1px * var(--currentWidth)));
}

css 변수를 설정하여 img의 width를 동적으로 부여한다.

const $imgs = Array.from(document.querySelector(".carousel-slides").children);
const $carousel = document.querySelector(".carousel");
const $carouselSlides = document.querySelector(".carousel-slides");

$carouselSlides.addEventListener("click", (e) => {
  $carouselSlides.style.setProperty(
    "--currentWidth",
    `${$imgs[0].clientWidth}`
  );
  $carousel.style.width = `${$imgs[1].clientWidth}px`;
});

wrapper div를 클릭하면 현재 img의 clientWidth만큼 -X축 방향으로 이동하고 보이는 부분(overflow:hidden이기 때문)의 width를 다음 이미지의 clientWidth로 설정하여 이미지의 width가 서로 달라도 carousel이 작동할 수 있게 한다.

그런데 이렇게 하면 width가 동적으로 변하면서 버벅이는 증상도 있고 이벤트 발생마다 width를 계산하고 바꾸는 것이 비효율적이라고 생각한다.

👈 👉 Top