React-Slideshow
A simple slideshow component built with react that supports slide, fade and zoom effects. For full documentation click here
Installation
npm install react-slideshow-image -S
yarn add react-slideshow-image
You need to import the css style, you can do that by adding to the js file
import 'react-slideshow-image/dist/styles.css'or to your css file
@import "react-slideshow-image/dist/styles.css";You can use three different effects of the slideshow. Check examples
Slide Effect
You can use this playground to tweak some values
import React from 'react';
import { Slide } from 'react-slideshow-image';
import 'react-slideshow-image/dist/styles.css'
const spanStyle = {
padding: '20px',
background: '#efefef',
color: '#000000'
}
const divStyle = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundSize: 'cover',
height: '400px'
}
const slideImages = [
{
url: 'https://images.unsplash.com/photo-1509721434272-b79147e0e708?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80',
caption: 'Slide 1'
},
{
url: 'https://images.unsplash.com/photo-1506710507565-203b9f24669b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1536&q=80',
caption: 'Slide 2'
},
{
url: 'https://images.unsplash.com/photo-1536987333706-fc9adfb10d91?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80',
caption: 'Slide 3'
},
];
const Slideshow = () => {
return (
<div className="slide-container">
<Slide>
{slideImages.map((slideImage, index)=> (
<div key={index}>
<div style={{ ...divStyle, 'backgroundImage': `url(${slideImage.url})` }}>
<span style={spanStyle}>{slideImage.caption}</span>
</div>
</div>
))}
</Slide>
</div>
)
}Fade Effect
You can use this playground to tweak some values
import React from 'react';
import { Fade } from 'react-slideshow-image';
import 'react-slideshow-image/dist/styles.css'
const fadeImages = [
{
url: 'https://images.unsplash.com/photo-1509721434272-b79147e0e708?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80',
caption: 'First Slide'
},
{
url: 'https://images.unsplash.com/photo-1506710507565-203b9f24669b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1536&q=80',
caption: 'Second Slide'
},
{
url: 'https://images.unsplash.com/photo-1536987333706-fc9adfb10d91?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80',
caption: 'Third Slide'
},
];
const Slideshow = () => {
return (
<div className="slide-container">
<Fade>
{fadeImages.map((fadeImage, index) => (
<div key={index}>
<img style={{ width: '100%' }} src={fadeImage.url} />
<h2>{fadeImage.caption}</h2>
</div>
))}
</Fade>
</div>
)
}Zoom Effect
You can use this playground to tweak some values
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>
)
}Development
If you want to run the app in development mode, you can run npm start to build the file in watch mode or npm build and then npm pack if you want to use it as a module in another project on your laptop.
To run the storybook just run npm run storybook