파이널 프로젝트 22일차(21-12-14/15)

📖 캐러셀 '직접' 구현하기

이미지 슬라이드 '직접' 구현

CSS 관련 라이브러리를 지양해야 한다는 팀원님의 조언에 따라 직접 캐러셀을 구현하기로 했습니다.
'react-slick'은 사용하지 않았습니다.

이미지 사이즈 이슈

화면에 이미지를 삽입하다보면, 크기가 제각각이고, 사이즈를 설정해줘도 반응하지 않는 이미지가 있었습니다.

흠.. 잘은 모르지만 ..
img 태그에 이미지를 삽입하면 이미지 파일 사이즈에 따라서 뒤죽박죽 돼서
보통은 div 태그에 background-image에다가 이미지를 넣는걸로 알고 있어요 !
출처

// 내가 구현했던 Carousel.js
  return (
    <>
      <CarouselWrapper>
        {
          images.map((image, idx) => 
            <CarouselBlock key={idx} style={{transform: `translateX(${index}%)`}}>
              <CarouselImg image={image} key={idx} />
            </CarouselBlock>
          )
        }
        <button onClick={onPrev} className="button prev"><IoIosArrowBack className="icon" size="25px"/></button>
        <button onClick={onNext} className="button next"><IoIosArrowForward className="icon" size="25px" /></button>
      </CarouselWrapper>
    </>
  );

transform