'React.JS Carousel Images Not Showing
So after spending ours figuring out how to route the images folder to my Slider.js component I still can't seem to make the images pop up.
Here's my Slider.js code
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((obj, index) => {
return (
<div
key={obj.id}
className={slideIndex === index + 1 ? "slide active-anim" : "slide"}
>
<img
src={process.env.PUBLIC_URL + `/images${index + 1}.jpg`}
/>
</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>
)
}
It shows this when I click and slide through. Just need to make sure the src is working enter image description here
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
