react-awesome-slider캐러셀 추가하기
2021. 5. 1. 19:09ㆍ개발 프로젝트/[리액트] SANTA 운동메이트 서비스
www.npmjs.com/package/react-awesome-slider
react-awesome-slider
React Awesome Slider is a 60fps performant, extendable, highly customisable, production ready React Component that renders a media (image/video) gallery slider carousel.
www.npmjs.com
캐러셀 부트스트랩은 사용하기 아주 간단한데도 난 에러가 자주났었다.
react-strap을 이용해보기도하고 react-slick도 이용해보았지만 내가 원하는대로 잘 안되던것..!!
그래서 결국 발견한 react-awesome-slider!
뭔가 기존의 캐러셀보다 더 귀엽게 커스터마이징이 가능한것 같다👏🏼
무엇보다 코드가 훨씬!! 간단하다!
import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/styles.css';
import React from 'react'
function Carousel() {
return (
<AwesomeSlider>
<div data-src="/path/to/image-0.png" />
<div data-src="/path/to/image-1.png" />
<div data-src="/path/to/image-2.jpg" />
</AwesomeSlider>
)
}
export default Carousel;
이 캐러셀 컴포넌트를 메인에서 불러와주면 끝!
이제 다시 기능 구현하러 고고싕..✌🏻
'개발 프로젝트 > [리액트] SANTA 운동메이트 서비스' 카테고리의 다른 글
등록버튼 두번 눌러야 등록되는 에러 해결하기🥲 (0) | 2021.05.06 |
---|---|
DatePicker라이브러리 사용하여 서버로 날짜, 시간 데이터 보내기 (0) | 2021.05.02 |
axios post test(aka. 모임 게시글 추가하기!) (0) | 2021.04.30 |
구현할 기능 소개(ft. MVP) (0) | 2021.04.26 |
서비스 기획하기! (0) | 2021.04.24 |