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;

이 캐러셀 컴포넌트를 메인에서 불러와주면 끝!

 

이제 다시 기능 구현하러 고고싕..✌🏻