개발자를 위한 React 컴포넌트 갤러리 16가지 방법

1.어썸슬라이더 반응

반응 콘텐츠 전환 슬라이더 . Awesome Slider는 프로덕션 준비 UI 범용 슬라이더의 애니메이션 세트를 렌더링하는 60fps, 경량, 고성능 구성 요소입니다.
react-awesome-slider는 미디어(이미지/비디오) 갤러리 슬라이더/캐러셀을 렌더링하는 60fps, 확장 가능하고 사용자 정의가 가능하며 프로덕션 준비가 된 React 구성 요소입니다.

2.리액트 비앤비 갤러리

React를 기반으로 하고 Airbnb 이미지 갤러리에서 영감을 받은 간단한 사진 갤러리

라이브 데모 https://peterpalau.github.io/react-bnb-gallery/

자바 스크립트 행맨 소스 코드

3. 반응 사진 갤러리

• 반응형, 액세스 가능, 구성 가능 및 사용자 지정 가능한 이미지 갤러리 구성 요소
• 사진의 원래 종횡비를 유지합니다.
• 석조 또는 자리맞추기 그리드를 작성합니다.
• 행 또는 열 방향 레이아웃 지원
• 이미지 선택, 즐겨찾기, 캡션 등의 사용자 정의 구현을 위한 이미지 렌더러를 제공합니다.
• SSR 앱 호환

Github에서 보기

4. 리액트 아이디 스위퍼

Swiper를 ReactJs 구성 요소로 사용하기 위한 라이브러리(최대 40kb의 축소된 크기를 줄이는 경량 버전의 Swiper 제공)

스위퍼란?
Swiper - 하드웨어 가속 전환과 놀라운 기본 동작을 갖춘 가장 현대적인 무료 모바일 터치 슬라이더입니다. 모바일 웹사이트, 모바일 웹 앱, 모바일 네이티브/하이브리드 앱에서 사용하기 위한 것입니다. 대부분 iOS용으로 설계되었지만 최신 Android, Windows Phone 8 및 최신 데스크톱 브라우저에서도 잘 작동합니다.

Swiper는 모든 플랫폼과 호환되지 않으며 최고의 경험과 단순성을 제공하기 위해 최신 앱/플랫폼에만 초점을 맞춘 최신 터치 슬라이더입니다.

5. 리액트 그리드 갤러리

리액트 그리드 갤러리

Google 포토에서 영감을 받고 React Images를 기반으로 하는 React용 정당화 이미지 갤러리 구성 요소입니다.

6.React 라이트박스 컴포넌트

ReactJS용 이미지 라이트박스 구성요소.

특징:

• 줌 컨트롤
• 회전 제어
• 부드러운 애니메이션
• 사용자 정의 가능한 축소판

Github에서 보기

7.React 회전 목마 이미지 갤러리

React 이미지 갤러리는 이미지 갤러리 및 캐러셀을 구축하기 위한 React 구성 요소입니다.

반응 이미지 갤러리의 기능

스프링 부트 최대 절전 모드 구성

• 모바일 스와이프 제스처
• 썸네일 탐색
• 전체 화면 지원
• 사용자 지정 렌더링 슬라이드
• 반응형 디자인
• 수많은 사용자 정의 옵션(아래 소품 참조)
• 경량 ~8kb(gzip으로 압축됨, 반응 제외)

Github에서 보기

8.Animate 배너 반응 구성 요소.

애니메이션 배너 반응 구성 요소.

예시

http://localhost:8012/examples/
온라인 예: http://react-component.github.io/banner-anim/

9. 앨리스 회전 목마 반응

React Alice Carousel은 컨텐츠 갤러리, 컨텐츠 회전자 및 모든 React 캐러셀을 구축하기 위한 React 구성 요소입니다.

react-alice-carousel의 특징

• 무한 루프
• 페이드아웃 애니메이션
• 자동 실행 모드
• 모바일 친화적
• 반응형 디자인
• 밀어서 슬라이드
• 인덱스 시작
• 색인으로 슬라이드
• RTL
• 키보드 탐색
• 터치 및 드래그 지원
• 사용자 지정 렌더링 슬라이드
• 사용자 정의 애니메이션 지속 시간
• 슬라이드의 여러 항목
• 무엇이든 표시/숨기기(표시, 화살표, 슬라이드 색인)

Github에서 보기

릭 스티브 머니 벨트

9. 반응형 캐러셀 반응

React를 위한 가볍고 완전히 사용자 정의 가능한 캐러셀 구성 요소입니다. React 앱을 위한 강력하고 가벼우며 완전히 사용자 정의 가능한 캐러셀 구성 요소입니다.
현재 처리해야 할 다른 일이 많기 때문에 여기 일이 매우 느리게 진행되고 있으므로 귀하의 질문에 답변하지 않거나 PR이 며칠 또는 몇 주 동안 검토되지 않은 경우 화를 내지 마십시오. 더 빠르게 진행하는 데 관심이 있는 사람은 PR을 제출하거나 검토하고 서로의 질문에 답변하여 도움을 줄 수 있습니다.

특징

• 반응형
• 모바일 친화적
• 밀어서 슬라이드
• 마우스 에뮬레이션 터치
• 서버 측 렌더링
• 키보드 탐색
• 사용자 정의 애니메이션 지속 시간
• 자동 재생
• 사용자 정의 자동 재생 간격
• 무한 루프
• 수평 또는 수직 방향
• 이미지, 비디오, 텍스트 콘텐츠 또는 원하는 모든 것을 지원합니다. 각 직계 자식은 하나의 슬라이드를 나타냅니다!
• 모든 플럭스 라이브러리 지원(selectedItem prop을 사용하여 앱 상태에서 설정하고 onChange 콜백을 사용하여 새 위치 가져오기)
• 무엇이든 표시/숨기기(엄지손가락, 표시기, 화살표, 상태)

Github에서 보기

10.아르스 아스날

반응 갤러리 선택기.

Github에서 보기

11.React 포토 갤러리

React.js를 사용하는 사진 갤러리. react를 사용하여 만든 첫 번째 '멋진 것' :)

12.React 및 CSS 그리드 이미지 갤러리

React, ES6 및 약간의 가벼운 CSS Grid 실험으로 만든 흡연 핫 이미지 갤러리!

**라이브 데모 **

13. 강렬한 반응

큰 이미지를 가까이서 보기 위한 React 컴포넌트입니다. 이 컴포넌트는 React와 함께 사용하기 위한 Intense Image Viewer의 포트입니다.

라이브 데모
http://bryce.io/react-intense/
Github에서 보기

14.React 이미지 라이트박스

React 프로젝트에서 이미지를 표시하기 위한 유연한 라이트박스 구성 요소입니다.
라이트박스 구성 요소에 반응합니다.

특징

• 키보드 단축키(속도 제한 포함)
• 이미지 줌
• 즉석에서 할당된 src 값을 사용한 유연한 렌더링
• 더 부드러운 보기를 위한 이미지 사전 로드
• 모바일 친화적, 핀치 투 줌 및 스와이프(@webcarrot 감사합니다!)
• 외부 CSS 없음

15. 반응형 사진 갤러리 반응

사진의 원래 종횡비를 유지하고 반응형으로 크기를 조정하는 상태 비저장 반응형 React 사진 갤러리 구성 요소입니다. 나만의 라우팅, 라이트박스를 추가하고 나만의 상태를 관리하세요.

• 반응형, 액세스 가능, 구성 가능 및 사용자 지정 가능한 이미지 갤러리 구성 요소
• 사진의 원래 종횡비를 유지합니다.
• 석조 또는 자리맞추기 그리드를 작성합니다.
• 행 또는 열 방향 레이아웃 지원
• 이미지 선택, 즐겨찾기, 캡션 등의 사용자 정의 구현을 위한 이미지 렌더러를 제공합니다.
• SSR 앱 호환

16. 반응 이미지

ReactJS가 이미지 배열을 표시하기 위한 간단한 반응형 Lightbox 구성 요소입니다.

사진 제공: Unsplash. 키보드를 사용하여 왼쪽 오른쪽 esc 탐색 — 또한 브라우저 창의 크기를 조정해 보십시오.

라이브 데모 http://jossmac.github.io/react-images/

#reactjs #자바스크립트

다음 js 파일 업로드