Best React slideshow Components and examples

A look at cool react slideshow plugins to easily inject into your React.js application.

(a). Use react slideshow

It is a react component for slideshow supporting slide, fade and zoom.

A simple slideshow component built with react that supports slide, fade and zoom effects.

Step 1: Install

You can install it via NPM:

npm install react-slideshow-image -S

Or via yarn:

yarn add react-slideshow-image

Step 2: Import

start by importing the css into your JS file:

import 'react-slideshow-image/dist/styles.css'

Or into your CSS file:

@import "react-slideshow-image/dist/styles.css";

Step 3: Use

For example here is a slide effect slideshow examples

import React from 'react';
import { Slide } from 'react-slideshow-image';
import 'react-slideshow-image/dist/styles.css'

const slideImages = [
  {
    url: 'images/slide_2.jpg',
    caption: 'Slide 1'
  },
  {
    url: 'images/slide_3.jpg',
    caption: 'Slide 2'
  },
  {
    url: 'images/slide_4.jpg',
    caption: 'Slide 3'
  },
];

const Slideshow = () => {
    return (
      <div className="slide-container">
        <Slide>
         {slideImages.map((slideImage, index)=> (
            <div className="each-slide" key={index}>
              <div style={{'backgroundImage': url(${slideImage.url})}}>
                <span>{slideImage.caption}</span>
              </div>
            </div>
          ))}
        </Slide>
      </div>
    )
}

And here is a fade effect example:

import React from 'react';
import { Slide } from 'react-slideshow-image';
import 'react-slideshow-image/dist/styles.css'

const slideImages = [
  {
    url: 'images/slide_2.jpg',
    caption: 'Slide 1'
  },
  {
    url: 'images/slide_3.jpg',
    caption: 'Slide 2'
  },
  {
    url: 'images/slide_4.jpg',
    caption: 'Slide 3'
  },
];

const Slideshow = () => {
    return (
      <div className="slide-container">
        <Slide>
         {slideImages.map((slideImage, index)=> (
            <div className="each-slide" key={index}>
              <div style={{'backgroundImage': url(${slideImage.url})}}>
                <span>{slideImage.caption}</span>
              </div>
            </div>
          ))}
        </Slide>
      </div>
    )
}

And here is a zoom effect slideshow example

import React from 'react';
import { Zoom } from 'react-slideshow-image';
import 'react-slideshow-image/dist/styles.css'

const images = [
  'images/slide_2.jpg',
  'images/slide_3.jpg',
  'images/slide_4.jpg',
  'images/slide_5.jpg',
  'images/slide_6.jpg',
  'images/slide_7.jpg'
];

const Slideshow = () => {
    return (
      <div className="slide-container">
        <Zoom scale={0.4}>
          {
            images.map((each, index) => <img key={index} style={{width: "100%"}} src={each} />)
          }
        </Zoom>
      </div>
    )
}

Reference

(b). Use react-slideshow-ui

react-slideshow-ui is a React Slideshow to show images like slideshare and speakerdeck.

Step 1: Install it

You can install it from npm via the folllowing command:

npm install --save react-slideshow-ui

STep 2: Import it

Then import it as follows:`

import React from 'react';
import {render} from 'react-dom';
import SlideShow from 'react-slideshow-ui';

Step 3: Use it

Finally use it as follows:

class App extends React.Component {
  render() {
    return (
      <div>
        <SlideShow
          style={{width: 400}}
          images={[
            './img/example1.png',
            './img/example2.png',
            './img/example3.png',
          ]}
          withTimestamp={true}
          pageWillUpdate={(index, image) => {
            console.log(Page Update! index: ${index}, image: ${image});
          }}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById('slideshow'));