React Slideshow

My passion for styled components and building everything myself from scratch has sometimes limited my ability to create awesomeness. This time, during my final project at Technigo, I finally dared to use external libraries. In this article I will show you react-slideshow-image.

First of all, you need to install below to your React project:

npm install react-slideshow-image -S

Then import:

import { Slide } from 'react-slideshow-image';

Now, let’s start!

You can use React Slideshow with different styling depending on how you want to use it. In my case I wanted a background with fading images using Fade Effect. To make that happen I changed the import from Slide to Fade:

import { Fade } from 'react-slideshow-image';

Below is the code for Fade Effect. I will show you how I used this and changed it to suit my project.

import React from 'react';
import { Fade } from 'react-slideshow-image';

const FadeExample = () => {
  const fadeImages = [
    "assets/images/slide_5.jpg",
    "assets/images/slide_6.jpg",
    "assets/images/slide_7.jpg"
  ];

  return (
    <div>
      <h2>Fade Effect</h2>
      <div className="slide-container">
        <Fade>
          <div className="each-fade">
            <div>
              <img src={fadeImages[0]} />
            </div>
            <p>First Slide</p>
          </div>
          <div className="each-fade">
            <p>Second Slide</p>
            <div>
              <img src={fadeImages[1]} />
            </div>
          </div>
          <div className="each-fade">
            <div>
              <img src={fadeImages[2]} />
            </div>
            <p>Third Slide</p>
          </div>
        </Fade>
      </div>
    </div>
  );
};

export default FadeExample;

The Fade Effect slideshow can easily be re-styled and changed with props, methods and CSS-classes. To be able to use classes for styling you have to add:

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

Below you’ll find the pre-styled CSS for Fade Effect slideshow:

.each-fade {
  display: flex;
  width: 100%;
}

.each-fade > div {
  width: 75%;
}

.each-fade > div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.each-fade p {
  width: 25%;
  font-size: 1em;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: #adceed;
}

I wanted another styling for my project, and I rather work with styled components, so I deleted all CSS-classes and created a styled component for my slideshow images:

styled component

Now my images are covering the full screen just as I wanted it. One thing left, the props. Below you can see the Fade component imported from react-slideshow-image. Here I can decide how to handle the images with props. I have put the slideshow to autoplay with 1 second and the transition duration for half a second with an easing effect. Arrows, pause on hover and swipe I decided not to use. The images are mapped from an array.

the fade component from react-slideshow-image with props deciding how it behaves

Now it is working! View it live at drejad.studio. Below is the full code for the start page component with react-slideshow-image:

start page component