Creating a Dynamic SlideShow using ReactJS

Tagged: CSS, ReactJS, Slideshow

This topic has 0 replies, 1 voice, and was last updated 1 year, 2 months ago by Precious.

Viewing 1 post (of 1 total)

Author
Posts

February 19, 2020 at 3:41 am #86130

Spectator

@precious

Slideshow

ReactJS beginners often struggle with implementing dynamic user interface tools like slideshows, css-automations, css-transitions, and responsiveness. Some newbies have even resorted to writing code for these features from scratch. But that shouldn’t be the case. This article explains in detail the steps to create a dynamic slideshow using ReactJS.

Requirements

For this tutorial, you need to have installed ReactJS and all its primary dependencies on your computer. Be sure to also have:

The Visual Studio Code (VSCode) Editor.
Command Prompt in Administrative mode.
At least 5 images in PNG format (recommended) or JPEG (JPG) format. They will serve as the feed for your slideshow.
Internet Access. Needed for component installations.
Some knowledge of basic CSS. You do not need to install Bootstrap.

With these basic requirements, you’re good to go.

Using React-Slideshow component – Slide Effect

The React-Slideshow-Image component allows you to build your slideshow and automate it with about 3 transition effects, namely:

Slide
Fade and
Zoom.

To begin, execute the following steps:

Create a react application using your terminal in visual studio code or your command prompt (recommended) by running the following commands; npx create-react-app slideapp. This creates a react application named slideapp. (Do not use capital letters in naming your app). A successful creation of the app should have your command prompt looking like the image below;

Open a terminal in your visual studio code editor and type the following code: npm install react-slideshow-image-s This installs the React-Slideshow library on your application. If the installation pulls through. You should have your editor terminal looking like the image below;

Now that your application is set up. Create a new folder inside the source folder and name it “Components”. This is where most of the component files that make up your application would come from.
Since we are creating a dynamic slideshow, create a file inside the “Components” folder and name it “Slideshow.js” – note that the name of the file is capitalized (the first letter is capitalized).
Inside Slideshow.js, import React and Slide from react-slideshow using the following codes: import React from 'react' and import { Slide } from 'react-slideshow-image'. You are importing Slide because it is the effect you may want to use on the slideshow. You could use Fade or Zoom – to do so, just replace Slide with Fade or Zoom. Your outlook should look like the image below

Now that the your file has been created – create a function inside it named exactly like the file. In this case, I have named my file Slideshow.js, thus the name of the function would be Slideshow. Also export the file such that it is accessible from App.js – the center from where your web application is launched. Your code should look like the screenshot below (Ignore the warnings, they would clear-out as we progress).

Open a folder inside the Public folder and name it images. Add all the images you would use in your slideshow here. The format of the images could be JPEG or PNG.
Create two constructors, one (named slideImages) for an array that houses the URL of the images, and another (named Properties) for describing the properties of the slideshow. Do these inside the Slideshow.js component. Use the image below for reference (Note the type of braces used for each construct and that they are not inside the function – but outside it).

From the screenshot above, we have 5 images making up the gallery. The second constructor gives us the properties of the slideshow; which shows that the maximum display time is 5 seconds (shown as 5000), the transition time to another image is 0.5 seconds (shown as 500), the slideshow runs indefinitely, there would pointer arrows on the left and right hand side, and a javascript function known as onChange is responsible for given new identities to the active and inactive images in the slideshow. The next step involves given the Slideshow function its arguments and what it should return.
For the first div in the function, assign its class name as “slide-container” it will come in handy when it is time to style your html…then proceed to enter the following lines of code as shown below.

From the image above, each div contains a link to an image in the array, and all divs are inside a customized container called slide – which inherits the slideshow properties given in the second constructor. The slide container is also part of the main div container in the function. Officially, your work here is done – the next step is styling.
Open the App.css file and add the following codes:


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

h3 {    
text-align: center;
}

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

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

.container {

width: 70%;

margin: auto;

}

h3 {

text-align: center;

}

.slide > div {

display: flex;

align-items: center;

justify-content: center;

background-size: cover;

height: 300px;

}

.slide span {

padding: 20px;

font-size: 20px;

background: #efefef;

text-align: center;

}

Save the css file and head on to the App.js file. Here, import Slideshow.js into App.js using the following code: import Slideshow from './components/Slideshow.js' and call an instance of it inside the App,js function. Use the screenshot below as reference.

At this stage, your slideshow should be ready. Open a terminal and run npm start. Your code should compile and run on a browser automatically (mine is chrome). The results from your terminal and your browser should look similar to the following screenshots.

Congratulations, your dynamic slideshow is up and running – on the Slide effect.

The Fade Effect

To implement the Fade effect, you should make the following adjustments to Slideshow.js file.

Import Fade from React-Slideshow-Image and delete the Slide import.
Change the className of all the inner div components from slide to fade.
Your code should resemble the one used in the code snippets below.

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

const slideImages = [
    '././images/two.jpg',
    '././images/three.jpg',
    '././images/four.jpg',
    '././images/five.jpg',
    '././images/six.jpg'
];

const properties = {
    duration: 5000,
    transitionDuration: 500,
    infinite: true,
    indicators: true,
    arrows: true,
    onChange: (oldIndex, newIndex) => {}
}

function Slideshow() {
    return(
        <div className = 'container'>
            <Fade {...properties}>
                <div className="fade">
                    <div className = 'image'>
                        <img alt = '' src = {slideImages[0]}/>
                    </div>
                </div>
                <div className="fade">
                    <div className = 'image'>
                        <img alt = '' src = {slideImages[1]}/>
                    </div>
                </div>
                <div className="fade">
                    <div className = 'image'>
                        <img alt = '' src = {slideImages[2]}/>
                    </div>
                </div>
                <div className="fade">
                    <div className = 'image'>
                        <img alt = '' src = {slideImages[3]}/>
                    </div>
                </div>
                <div className="fade">
                    <div className = 'image'>
                        <img alt = '' src = {slideImages[4]}/>
                    </div>
                </div>
            </Fade>  
        </div>
    )
}
export default Slideshow

import React from 'react'

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

const slideImages = [

'././images/two.jpg',

'././images/three.jpg',

'././images/four.jpg',

'././images/five.jpg',

'././images/six.jpg'

];

const properties = {

duration: 5000,

transitionDuration: 500,

infinite: true,

indicators: true,

arrows: true,

onChange: (oldIndex, newIndex) => {}

}

function Slideshow() {

return(

</div>

</div>

</div>

</div>

</div>

</Fade>

</div>

)

}

export default Slideshow

Save Your work on both pages and go live – your slideshow should work with the Fade Effect.

The Zoom (out) Effect

The zoom effect is the quickest effect to implement and has the fewest codes to worry about.

To begin, import Zoom into your component.
Modify your properties to include the scale property – which decides whether the images zoom in or zoom out during transition. Values between 0.1 and 0.9 enables zooming out, while values from 1.0 and above enable zooming in. For this case, we would be zooming out.
Then Enter the following codes in your Slideshow.js file.

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

const slideImages = [
    '././images/two.jpg',
    '././images/three.jpg',
    '././images/four.jpg',
    '././images/five.jpg',
    '././images/six.jpg'
];

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

function Slideshow() {
    return(
        <div className = 'container'>
            <Zoom {...properties}>
                {
                    slideImages.map((each, index) => <img alt = '' key={index} style={{width: "100%"}} src={each} />)
                }
            </Zoom>  
        </div>
    )
}
export default Slideshow

import React from 'react'

import { Zoom } from 'react-slideshow-image'

const slideImages = [

'././images/two.jpg',

'././images/three.jpg',

'././images/four.jpg',

'././images/five.jpg',

'././images/six.jpg'

];

const properties = {

duration: 5000,

transitionDuration: 500,

infinite: true,

indicators: true,

arrows: true,

scale: 0.9

}

function Slideshow() {

return(

{

slideImages.map((each, index) => <img alt = '' key={index} style={{width: "100%"}} src={each} />)

}

</Zoom>

</div>

)

}

export default Slideshow

Do not make any changes to the App.css file. Save your Slideshow.js file and run your app in the browser. The zoom effect should be active on your slideshow.

In Conclusion, enabling dynamic effects such as slideshows on React may be stressful to implement from the scratch. But with an fully-built and tailored dependency such as the one built in this application; the user only needs to –

Import the dependencies.
Make constructs for the properties.
Define an array containing the images.
Create a functional component containing the elements to run the slideshow and
Style your platform using CSS.

And that is all you need.

Author
Posts

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.