An innovative, responsive, touch-friendly, and completely open-source carousel component for React.

Supports server-side rendering, lazy loading, fullscreen, thumbnails, touch gestures, mouse emulation, RTL, keyboard navigation, and customisations.

How to use it:

1. Install and import the gallery carousel component.

# Yarn
$ yarn add react-gallery-carousel

# NPM
$ npm i react-gallery-carousel

import React from 'react';
import Carousel from 'react-gallery-carousel';
import 'react-gallery-carousel/dist/index.css';

2. Create a basic image carousel.

const myCarousel = ({ images }) => {
  return (
    <div className="carousel-container">
      <Carousel images={images} />
    </div>
  );
};
export default myCarousel;

3. Available component props.

index: 0,
isRTL: false,
isLoop: true,
isMaximized: false,
shouldLazyLoad: true,
canAutoPlay: true,
isAutoPlaying: false,
autoPlayInterval: 5000, // ms
hasTransition: true,
swipeThreshold: 0.1, // * 100%
swipeRollbackSpeed: 0.1, // px/ms
transitionSpeed: 1, // px/ms
transitionDurationMin: 250, // ms
transitionDurationLimit: 750, // ms
widgetsHasShadow: false,
hasLeftButton: 'centerLeft',
hasRightButton: 'centerRight',
hasMediaButton: 'topLeft',
hasSizeButton: 'topRight',
hasIndexBoard: 'topCenter',
hasDotButtons: false,
hasCaptions: false,
hasThumbnails: true,
shouldSwipeOnMouse: true,
shouldMaximizeOnClick: false,
shouldMinimizeOnClick: false,
shouldMinimizeOnSwipeDown: true,
onIndexChange: () => {},
onSwipeMoveX: () => {},
onSwipeMoveY: () => {},
onSwipeEndDown: () => {},
onTap: () => {},
objectFit: 'cover',
objectFitAtMax: 'contain'

Preview:

Download Details:

Author: yifaneye

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/yifaneye/react-gallery-carousel

License: MIT