https://www.npmjs.com/package/react-image-gallery
react-image-gallery
React carousel image gallery component with thumbnail and mobile support. Latest version: 1.2.7, last published: 6 months ago. Start using react-image-gallery in your project by running `npm i react-image-gallery`. There are 152 other projects in the npm r
www.npmjs.com
설치
npm install react-image-gallery
style import
# CSS
@import "~react-image-gallery/styles/css/image-gallery.css";
Example
import ImageGallery from 'react-image-gallery';
const images = [
{
original: 'https://picsum.photos/id/1018/1000/600/',
thumbnail: 'https://picsum.photos/id/1018/250/150/',
},
{
original: 'https://picsum.photos/id/1015/1000/600/',
thumbnail: 'https://picsum.photos/id/1015/250/150/',
},
{
original: 'https://picsum.photos/id/1019/1000/600/',
thumbnail: 'https://picsum.photos/id/1019/250/150/',
},
];
class MyGallery extends React.Component {
render() {
return <ImageGallery items={images} />;
}
}
결과
'Front-end > React' 카테고리의 다른 글
| [React] useMemo 원시타입/객체 타입 (0) | 2022.03.09 |
|---|---|
| Redux 란 ? Redux Setting Up - 1 (0) | 2022.03.07 |
| [React] Dropzone 라이브러리 사용하기 (0) | 2022.02.19 |
| [Node+React] 로그인 구현 (server) (0) | 2022.02.12 |
| Props vs State vs Redux (0) | 2022.01.30 |
