react-slideshow-image
v4.3.2TypeScript
An image slideshow with react
0/weekUpdated 1 years agoMITUnpacked: 241.7 KB
Published by Femi Oladeji
npm install react-slideshow-imageReact-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
js
import 'react-slideshow-image/dist/styles.css'`
or to your css file
css
@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
js
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 (
{slideImages.map((slideImage, index)=> (
url(${slideImage.url}) }}>
{slideImage.caption}
))}
)
}
`Fade Effect
You can use this playground to tweak some values
js
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 (
{fadeImages.map((fadeImage, index) => (
{fadeImage.caption}
))}
)
}
`Zoom Effect
You can use this playground to tweak some values
js
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 (
{
images.map((each, index) => 
)
}
)
}
`Development
If you want to run the app in development mode, you can run 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`