Slider won't show images in ReactJS

Question

I am creating a Slider in ReactJS. I have my images in an array(dataSldier.js) which I am importing into the (Slider.js) file but my images are not showing. My arrow icons are showing so it's confusing. My code compiles successfully however my slider is blank with only the navigation arrows showing. Please what am I doing wrong ?

This is the code for the Slider :::

import React, { useState } from 'react'
import './Slider.css'
import BtnSlider from './BtnSlider'
import dataSlider from './dataSlider'


export default function Slider() {

    const [slideIndex, setSlideIndex] = useState(1)

    const nextSlide = () => {
        if(slideIndex !== dataSlider.length){
            setSlideIndex(slideIndex + 1)
        }
        else if (slideIndex === dataSlider.length){
            setSlideIndex(1)
        }

    }

    const prevSlide = () => {
        if(slideIndex !== 1){
            setSlideIndex(slideIndex - 1)
        }
        else if (slideIndex === 1){
            setSlideIndex(dataSlider.length)
        }
    }

    const moveDot = index => {
        setSlideIndex(index)
    }
    return (
        <div className="container-slider">
            {dataSlider.map(({imgPath, index}) => {
                return (
                    <div
                        key={index} 
                        className={slideIndex === index + 1 ? "slide active-anim" : "slide"}>
                        <img
                            src={imgPath}
                            alt=""
                        />
                    </div>
                )
            })}
            <BtnSlider moveSlide={nextSlide} direction={"next"}/>
            <BtnSlider moveSlide={prevSlide} direction={"prev"}/>

            <div className="container-dots">
                {Array.from({length: 5}).map((item, index) => (
                    <div 
                    onClick={() => moveDot(index + 1)} 
                    className={slideIndex === index + 1 ? "dot active" : "dot"}
                    ></div>
                ))}
            </div>
        </div>
    )
}

This is the dataSlider for Images :::

import hic from '../Imgs/IMG_0061.jpg'
import fic from '../Imgs/IMG_6855.jpg'
import vic from '../Imgs/IMG_2002.jpg'
import ric from '../Imgs/IMG_2003.jpg'
import oic from '../Imgs/IMG_0096.jpg'


    const dataSlider = [
        {
            imgPath :{hic},
        },
        {
            imgPath : {fic},
        },
        {
            imgPath: {vic}, 
        },
        {
            imgPath : {ric},
        },
        {
            imgPath : {oic},
        },
    ];
    
    export default dataSlider;

The CSS code::

.container-slider {
  max-width: 700px;
  height: 500px;
  margin: 100px auto 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 700px) {
  .container-slider {
    margin: 100px 10px 0;
  }
}
.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 1;
  transition: opacity ease-in-out 0.4s;
}
.slide img {
  width: 600px;
  height: 600px;
  object-fit: cover;
}
.active-anim {
  opacity: 1;
}

.btn-slide {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #5f0b5f;
  border: 1px solid rgba(34, 34, 34, 0.287);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.btn-slide img {
  width: 25px;
  height: 25px;
  pointer-events: none;
}
.prev {
  top: 50%;
  left: 20px;
  transform: translateY(-60%);
}
.next {
  top: 50%;
  right: 20px;
  transform: translateY(-60%);
}

.container-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #f1f1f1;
  margin: 0 5px;
  background: #f1f1f1;
}
.dot.active {
  background: rgb(32, 32, 32);
}

Answer 1

I think the problem comes from here

            {dataSlider.map(({imgPath, index}) => {

index should be outside like so :

        {dataSlider.map(({imgPath}, index) => {

Answer 2

It's kind of hard to guess, without more detailed code but I think, since, you're importing images in dataSlider file with import statement, you don't need to wrap them in additional require in Slider.

Try it like this:

 <img src={imgPath}

Insetad of

<img src={require(`../Imgs/${imgPath}.jpg`)}

Check out this issue for more details, about how to use static images in react: How do I reference a local image in React?

Answer 3

I found a solution that works perfectly from me. The issue arises as I was iterating/mapping over the array with many images.

Firstly ;

I changed my array to this :

const dataSlider = [
    {
        imgPath : require('../Imgs/IMG_0061.jpg')
    },
    {
        imgPath : require('../Imgs/IMG_6855.jpg')
    },
    {
        imgPath : require('../Imgs/IMG_2002.jpg') 
    },
    {
        imgPath : require('../Imgs/IMG_2003.jpg')
    },
    {
        imgPath : require('../Imgs/IMG_0096.jpg')
    },
];

export default dataSlider;

This is the array containing the local images I am mapping over. I wrapped each of the image path with 'Require' so you have to do it like this.

Secondly ::

In the component where I am importing this images to iterate over, I changed the src attribute to this :::

<img
    src={imgPath.default}
    alt={'image holder'}
    />

The 'default' attribute is necessary when naming your 'src' path. 'alt' can vary.

I hope this helps someone else with the same challenge. Thanks