react-fullscreen-slideshow

A simple React image fullscreen slideshow component

View Demo

Features

• Full screen modal slideshow with thumbnail navigation
• Slideshow preview which can be clicked on for the fullscreen view.
• Display captions and big descriptions along with the images
• The View All view can be used for navigating galleries with large number of images

Installation

npm install --save react-fullscreen-slideshow

Usage

An example using react-fullscreen-slideshow

import React, { Component } from 'react';
import ReactFullscreenSlideshow from 'react-fullscreen-slideshow';

const images = [
    {
        image: 'images/image_1.jpg',
        caption: 'Caption for image_1',
        description: 'Description for image_1'
    },
    {
        image: 'images/image_2.jpg',
        caption: 'Caption for image_2',
        description: 'Very big description for image_2'
    },
    {
        image: 'images/image_3.jpg',
        caption: 'Image with no description'
    }
];

class App extends Component {
  render() {
    return (
        <div className="App"> 
            <ReactFullscreenSlideshow images={images} title={"Example Image slideshow"}/>
        </div>
    );
  }
}
export default App;

Props

Prop	Type	Description	isRequired	Default
images	Array of objects	Array of objects containing image, caption and description. (See above example for reference)	Yes	NA
title	string	Title of the image slideshow	Yes	NA
cycle	boolean	Enable/disable infinite cycling of slides	No	false
currentSlideIndex	number	Index of image from which the scrolling starts.	No	0
BannerImgIndex	number	Index of the image to be used in the preview banner.	No	0
displayOverlay	boolean	Show/hide the overlay text in the preview banner	No	true
displayPreviewBanner	boolean	Show/hide the preview banner	No	true
width	string	Sets the width of the preview. Examples: '100%', '50vw'	No	'100%'
height	string	Sets the height of the preview. Examples: '300px', '40%'	No	'auto'
thumbnailsToBeDisplayed	number	Number of thumbnails that are visible at a time.	No	8

License

MIT