내일 배움 캠프 23_08_10 TIL

오늘은 슬라이더를 구현하기위한 캐러셀과

yarn add react-responsive-carousel 로 설치를 해준 후

import { Carousel } from 'react-responsive-carousel';

import 'react-responsive-carousel/lib/styles/carousel.min.css';

이렇게 두개를 임포트해주고

 

<Carousel>

            {post.image_urls.map((imageUrl, index) => (

              <div key={index}>

                <S.Image src={`${process.env.REACT_APP_SUPABASE_STORAGE_URL}${imageUrl}`} alt={`Image ${index}`} />

              </div>

            ))}

          </Carousel>

이런식으로 이미지를 불러오는 곳을 감싸주기만하면 끝 

물론 이렇다면 

 

슬라이드바가 너무 안보인다 되도록이면 슬라이드 바는 커스텀해서 사용하는게 좋을 듯 하다