Can someone help me troubleshoot why my images are not displaying in the slider on my homepage? I have set up the slider using React Slideshow Image, but the images are not showing up for some reason.
I am also wondering if anyone knows of any full-screen slider libraries that would work well for displaying background images on a homepage?
Below is a snippet of the code I am currently using:
import React from 'react'
import { Fade } from 'react-slideshow-image'
import * as styles from '../styles/slider.module.css'
import 'react-slideshow-image/dist/styles.css'
const fadeImages = [
'src/images/constructionconcrete.jpg',
'src/images/constructionbuilding.jpg',
'src/images/constructiondusk.jpg'
];
const ImageSlider = () => {
return (
<div className={styles.imageContainer}>
<Fade>
<div className={styles.eachFade}>
<div>
<img src={fadeImages[0]} />
</div>
<p>First Image</p>
</div>
<div className={styles.eachFade}>
<p>Second Image</p>
<div>
<img src={fadeImages[1]} />
</div>
</div>
<div className={styles.eachFade}>
<div>
<img src={fadeImages[2]} />
</div>
<p>Third Image</p>
</div>
</Fade>
</div>
);
};
export default ImageSlider;
If anyone has any insights or suggestions, I would greatly appreciate it!
Thank you in advance!