[react] react-slick을 이용한 이미지 슬라이드

woo·2022년 5월 12일
0

기능 구현

목록 보기
8/17

인스타처럼 이미지 슬라이드 기능을 넣어보고자 만들었다!

🌱react-slick

const StyledSlider = styled(Slider)`
    height: 100%;
    .slick-list {
        height: 100%;
        object-fit: cover;
        display: flex; 
        align-items: center; // 이미지가 정방향이 아닐 경우 가운데 위치
    }
    .slick-track {
        display: flex;
        align-items: center;
    }
    .slick-prev {
        left: 6px;
        z-index: 999;
    }
    .slick-next {
        right: 6px;
        z-index: 999;
    }
`;

<StyledSlider {...settings}>
	{
      conference.imageUrls.map((img, i) => {
          return <ModalImg src={`https://${img}`} key={i}/> 
      })
	}
</StyledSlider>

라이브러리에 styled-component 적용하는 거는 에 포스팅해두었다.

profile
🌱 매일 성장하는 개발자

0개의 댓글