react-slideshow-overlay v1.1.7

React-Slideshow

A simple slideshow component built with react that supports slide, fade and zoom effects. This project is an extension of react-slideshow-image

Installation

npm install react-slideshow-overlay -S

yarn add react-slideshow-overlay

You can use three different effects of the slideshow. Check the demo

Slide Effect

import React from 'react'
import { Slide } from 'react-slideshow-overlay'

const slideImages = ['images/slide_2.jpg', 'images/slide_3.jpg', 'images/slide_4.jpg']

const properties = {
    duration: 5000,
    transitionDuration: 500,
    infinite: true,
    indicators: true,
    arrows: true
}

const Slideshow = () => {
    return (
        <Slide {...properties}>
            <div className="each-slide">
                <div style={{ backgroundImage: `url(${slideImages[0]})` }}>
                    <span>Slide 1</span>
                </div>
            </div>
            <div className="each-slide">
                <div style={{ backgroundImage: `url(${slideImages[1]})` }}>
                    <span>Slide 2</span>
                </div>
            </div>
            <div className="each-slide">
                <div style={{ backgroundImage: `url(${slideImages[2]})` }}>
                    <span>Slide 3</span>
                </div>
            </div>
        </Slide>
    )
}

The default value for duration and transitionDuration is 5000 and 1000 milliseconds respectively

Fade Effect

import React from 'react'
import { Fade } from 'react-slideshow-overlay'

const fadeImages = ['images/slide_5.jpg', 'images/slide_6.jpg', 'images/slide_7.jpg']

const fadeProperties = {
    duration: 5000,
    transitionDuration: 500,
    infinite: false,
    indicators: true
}

const Slideshow = () => {
    return (
        <Fade {...fadeProperties}>
            <div className="each-fade">
                <div className="image-container">
                    <img src={fadeImages[0]} />
                </div>
                <h2>First Slide</h2>
            </div>
            <div className="each-fade">
                <div className="image-container">
                    <img src={fadeImages[1]} />
                </div>
                <h2>Second Slide</h2>
            </div>
            <div className="each-fade">
                <div className="image-container">
                    <img src={fadeImages[2]} />
                </div>
                <h2>Third Slide</h2>
            </div>
        </Fade>
    )
}

The default value for duration and transitionDuration is 5000 and 1000 milliseconds respectively

Zoom Effect

import React from 'react'
import { Zoom } from 'react-slideshow-overlay'

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 zoomOutProperties = {
    duration: 5000,
    transitionDuration: 500,
    infinite: true,
    indicators: true,
    scale: 0.4,
    arrows: true
}

const Slideshow = () => {
    return (
        <Zoom {...zoomOutProperties}>
            {images.map((each, index) => (
                <img key={index} style={{ width: '100%' }} src={each} />
            ))}
        </Zoom>
    )
}

CSS

This is what my css looks like. You can customize this to your own taste

.slide-container {
  width: 70%;
  margin: auto; }

h3 {
  text-align: center; }

.each-slide > div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  height: 300px;
}

.each-slide span {
  padding: 20px;
  font-size: 20px;
  background: #efefef;
  text-align: center;
}

.each-fade {
  display: flex;
}

.each-fade .image-container {
  width: 75%;
  overflow: hidden;
}

.each-fade .image-container img {
  width: 100%;
}

.each-fade h2 {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: #adceed;
}

Webpack configuration

⚠️ If you bootstrapped the app without using create-react-app, you will need to add css loader and style loader to your webpack config

webpack.config.js

{
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
            }
        ]
    }
}

HTML properties like className, data-* attributes and others will be applied to the parent div

Properties