How to create image slider in React js/How to create Auto image slider in React js
**1. Create your component.
Create a ImageSlider.js And ImageSliderAuto.js file, which will represent your component.
1) ImageSlider.js
import React, { useEffect, useState } from 'react';
import './ImageSlider.css';
const ImageSlider = (props) => {
const SliderProperty = {
ImageNo: '',
ImageName: '',
ImageSrc: ''
}
const [sliderProperty, setSliderProperty] = useState(SliderProperty);
const { ImageNo, ImageName, ImageSrc } = sliderProperty;
const [count, setCount] = useState(0);
const [animationCls, setAnimationCls] = useState('displayBlock fade');
const PreClick = () => {
setAnimationCls(() => ('displayNone fade'));
const myTimeout = setTimeout(() => {
setAnimationCls('displayBlock fade')
}, 100);
if (count > 0) {
setCount((preCount) => preCount - 1);
}
if (count === 0) {
setCount(props.ImageData.length-1);
}
};
const NextClick = () => {
setAnimationCls(() => ('displayNone fade'));
const myTimeout = setTimeout(() => {
setAnimationCls('displayBlock fade')
}, 100);
if (count <= props.ImageData.length - 2) {
setCount((preCount) => preCount + 1);
}
if (count === props.ImageData.length-1) {
setCount(0);
}
};
useEffect(() => {
setSliderProperty((previous) => ({ ...previous, ImageNo: props.ImageData[count].ImageNo, ImageName: props.ImageData[count].ImageName, ImageSrc: props.ImageData[count].ImageSrc }));
}, [count]);
return (
<>
<div className='slideshow-container '>
<div className={animationCls}>
<div className="numbertext">{ImageNo}</div>
<img src={ImageSrc} style={{ width: '100%', height: '100%' }} alt="Img" />
</div>
<button className="prev" onClick={PreClick}>❮</button>
<button className="next" onClick={NextClick}>❯</button>
<div className="text">{ImageName}</div>
</div>
</>
);
};
export default ImageSlider;
2)ImageSliderAuto.js
import React, { useEffect, useState } from 'react';
import './ImageSlider.css';
const ImageSliderAuto = (props) => {
const SliderProperty = {
ImageNo: '',
ImageName: '',
ImageSrc: ''
}
const [sliderProperty, setSliderProperty] = useState(SliderProperty);
const { ImageNo, ImageName, ImageSrc } = sliderProperty;
const [count, setCount] = useState(0);
const [animationCls, setAnimationCls] = useState('displayBlock fade');
const NextClick = () => {
setAnimationCls(() => ('displayNone fade'));
const myTimeout = setTimeout(() => {
setAnimationCls('displayBlock fade')
}, 100);
if (count <= props.ImageData.length-1) {
setCount(count+1);
}
if (count === props.ImageData.length-1) {
setCount(0);
}
};
useEffect(() => {
setSliderProperty((previous) => ({ ...previous, ImageNo: props.ImageData[count].ImageNo, ImageName: props.ImageData[count].ImageName, ImageSrc: props.ImageData[count].ImageSrc }));
}, [count]);
useEffect(() => {
const interval= setInterval(() => {
NextClick();
}, props.SlideInterValTime);
return () => clearInterval(interval);
}, [count]);
return (
<>
<div className='slideshow-container '>
<div className={animationCls}>
<div className="numbertext">{ImageNo}</div>
<img src={ImageSrc} className='imageStyle' alt="Img" />
</div>
<div className="text">{ImageName}</div>
</div>
</>
);
};
export default ImageSliderAuto;
3. Create the .ImageSlider.css file
.slideshow-container {
width: 70%;
position: relative;
margin: auto;
height:350px;
}
.imageStyle{
width: 100%;
height: 100%;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
border:none;
background-color:transparent
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.displayNone{
display:none;
}
.displayBlock {
display: block;
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 13px;
width: 100%;
text-align: center;
float: left;
}
/* Fading animation */
.fade {
width: 100%;
height: 100%;
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
3) Add component(ImageSlider/ImageSliderAuto) In App.js File
import './App.css';
import ImageSlider from './component/ImageSlider';
import ImageSliderAuto from './component/ImageSliderAuto';
import { ImageData } from './json/JsonData';
function App() {
return (
<>
<ImageSlider ImageData={ImageData}/><br/>
<ImageSliderAuto ImageData={ImageData} SlideInterValTime={ 2000}/>
</>
);
}
export default App;
`
4)create Json File For Image Details
`import Img1 from '../img/img_mountains_wide.jpg'
import Img2 from '../img/img_nature_wide.jpg'
import Img3 from '../img/img_snow_wide.jpg'
import Img4 from '../img/img_band_ny.jpg'
export const ImageData = [
{
ImageNo:'1/4',
ImageName: 'mountains',
ImageSrc: Img1
},
{
ImageNo: '2/4',
ImageName: 'img_nature',
ImageSrc: Img2
},
{
ImageNo: '3/4',
ImageName: 'img_snow',
ImageSrc: Img3
},
{
ImageNo: '4/4',
ImageName: 'img_band_ny',
ImageSrc: Img4
}
];
Well done! You now have an awesome slider for your website!
Drop some love by liking or commenting ♥
Reference w3schools
Top comments (1)
Thanks!