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);
}

CodePudding user response：

I think the problem comes from here

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

index should be outside like so :

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

CodePudding user response：

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?