React Image Gallery

Theme by Xiaolin

|

Updated: 20 May 2025

|

3882 Stars

React carousel image gallery component with thumbnail support

Categories

Overview:

React Image Gallery is a React component designed for building image galleries and carousels. It offers a range of features such as mobile swipe gestures, thumbnail navigation, fullscreen support, custom rendered slides, RTL support, responsive design, and a variety of customization options to cater to different needs.

Features:

• Mobile swipe gestures: Allows users to swipe through images on mobile devices.
• Thumbnail navigation: Enables easy navigation through thumbnails of images.
• Fullscreen support: Offers the option to view images in fullscreen mode.
• Custom rendered slides: Allows for custom rendering of individual slides.
• RTL support: Supports right-to-left direction for languages that read from right to left.
• Responsive design: Ensures the gallery adapts to different screen sizes.
• Tons of customization options: Provides a wide range of customizable properties to tailor the gallery to specific requirements.

Installation:

To install React Image Gallery, you need to have React 16.0.0 or later. Below is an example of how you can import and use the component:

npm install react-image-gallery

import ReactImageGallery from 'react-image-gallery';
import 'react-image-gallery/styles/css/image-gallery.css';

function App() {
  const images = [
    {
      original: 'url-to-image.jpg',
      thumbnail: 'url-to-thumbnail.jpg',
    },
    // Add more images as needed
  ];

  return <ReactImageGallery items={images} />;
}

export default App;

Summary:

React Image Gallery is a versatile React component that simplifies the creation of image galleries and carousels. With features like mobile swipe gestures, thumbnail navigation, and customization options, it offers developers a flexible solution for displaying images in a visually appealing manner.