인스타처럼 이미지 슬라이드 기능을 넣어보고자 만들었다!
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 적용하는 거는 글에 포스팅해두었다.