[#. react-image-gallery] npm 패키지를 사용해서 상품 상세 페이지에 이미지 슬라이드 image slide 만들기

 

 

 

 

 

Node + React로 쇼핑몰을 개발하고 있다
react-image-gallery 패키지를 설치해서 상품 상세 페이지에서 이미지 슬라이드를 사용해 보자

 

 

 

 

www.npmjs.com/package/react-image-gallery

react-image-gallery

 

 

 

 

① react-image-gallery 설치

npm install react-image-gallery --save

 

 

 

 

 

② css 설정

src/index.css 최상단에 css 파일을 import 해준다

 

@import "~react-image-gallery/styles/css/image-gallery.css";

 

 

 

 

 

③ image 주소 가져오기

 

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/',
  },
];
 
function ProductDetail() {
    return (
    	<ImageGallery items={images} />;
    )
}

export default ProductDetail;

 

 

 

이렇게 이미지 슬라이드를 사용할 수 있다