hv-react-slideshow-image
v1.3.0
Published
An image slideshow with react
Downloads
4
Maintainers
Readme
React-Slideshow
A simple slideshow component built with react that supports slide, fade and zoom effects
Installation
npm install react-slideshow-image -S
yarn add react-slideshow-image
You can use three different effects of the slideshow. Check the demo
Slide Effect
import React from 'react';
import { Slide } from 'react-slideshow-image';
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,
onChange: (oldIndex, newIndex) => {
console.log(`slide transition from ${oldIndex} to ${newIndex}`);
}
}
const Slideshow = () => {
return (
<div className="slide-container">
<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>
</div>
)
}
The default value for duration and transitionDuration is 5000 and 1000 milliseconds respectively
Fade Effect
import React from 'react';
import { Fade } from 'react-slideshow-image';
const fadeImages = [
'images/slide_5.jpg',
'images/slide_6.jpg',
'images/slide_7.jpg'
];
const fadeProperties = {
duration: 5000,
transitionDuration: 500,
infinite: false,
indicators: true,
onChange: (oldIndex, newIndex) => {
console.log(`fade transition from ${oldIndex} to ${newIndex}`);
}
}
const Slideshow = () => {
return (
<div className="slide-container">
<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>
</div>
)
}
The default value for duration and transitionDuration is 5000 and 1000 milliseconds respectively
Zoom Effect
import React from 'react';
import { Zoom } from 'react-slideshow-image';
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 (
<div className="slide-container">
<Zoom {...zoomOutProperties}>
{
images.map((each, index) => <img key={index} style={{width: "100%"}} src={each} />)
}
</Zoom>
</div>
)
}
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" }
]
}
]
}
}
⚠️ For those using Next.js
, this should be your next.config.js
inorder to avoid errors relating to importing css files within node modules
next.config.js
const withCSS = require("@zeit/next-css");
if (typeof require !== "undefined") {
require.extensions[".css"] = file => {};
}
module.exports = {
webpack: config => {
// Fixes npm packages that depend on `fs` module
config.node = {
fs: "empty"
};
return config;
}
};
module.exports = withCSS();
HTML properties like className, data-* attributes and others will be applied to the parent div
Properties
| Properties | Type | DefaultValue | Description | | ------------------- |:-----------:| ------------- | ------------------------------------------------------------------------------------------ | | duration | integer | 5000 | Time it takes (milliseconds) before next transition starts | | transitionDuration | integer | 1000 | Determines how long the transition takes | | infinite | boolean | true | Specifies if the transition should loop throughout | | indicators | boolean | false | For specifying if there should be dots below the slideshow | | scale | number | | Required when using zoom to specify the scale the current slide should be zoomed to | | arrows | boolean | true | Determines if there should be a navigational arrow for going to the next or previous slide | | autoplay | boolean | true | Responsible for determining if the slideshow should start automatically | | onChange | function | | Callback that gets triggered at the end of every transition. The oldIndex and newIndex are passed as arguments |
Methods
goNext() It is used to programmatically transition the slide to the next one.
goBack() If you want to show the previous slide, then use this function
goTo(index) It can be used to transition the slide to a particular index. N.B Index starts from 0
To call the method you can use the slide's ref attribute and then call the method.
this.slideRef.goNext()