https://github.com/femioladeji/react-slideshow
A react component for slideshow supporting slide, fade and zoom
https://github.com/femioladeji/react-slideshow
carousel gallery images react slide slideshow
Last synced: 2 months ago
JSON representation
A react component for slideshow supporting slide, fade and zoom
- Host: GitHub
- URL: https://github.com/femioladeji/react-slideshow
- Owner: femioladeji
- License: mit
- Created: 2017-07-30T13:43:49.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-10-04T08:59:14.000Z (over 1 year ago)
- Last Synced: 2025-10-27T04:28:51.150Z (6 months ago)
- Topics: carousel, gallery, images, react, slide, slideshow
- Language: JavaScript
- Homepage: https://react-slideshow-image.netlify.app/
- Size: 5.21 MB
- Stars: 383
- Watchers: 6
- Forks: 71
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React-Slideshow
[](https://github.com/femioladeji/react-slideshow)
[](https://codecov.io/gh/femioladeji/react-slideshow)
[](http://packagequality.com/#?package=react-slideshow-image)
[](https://www.npmjs.com/package/react-slideshow-image)
A simple slideshow component built with react that supports slide, fade and zoom effects. For full documentation click [here](https://react-slideshow-image.netlify.app/)
## 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](https://react-slideshow-image.netlify.app/)
## Slide Effect
You can use this [playground](https://codesandbox.io/s/serene-lalande-yjmol) 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)=> (
{slideImage.caption}
))}
)
}
```
## Fade Effect
You can use this [playground](https://codesandbox.io/s/admiring-wave-17e0j) 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](https://codesandbox.io/s/priceless-bohr-ggirf) 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 `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`