Im working on an image slider, where the content changes based of the location.pathname
import { useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom';
import './slider.css'
const frontpage = [ { id: 1, src: require('../../../resources/imgs/clutchscrewdriver/clutchscrewdrivers1.jpg'), alt: 'slidercontent' },
{ id: 2, src: require('../../../resources/imgs/currentscrewdriver/currentcontrolledscrewdrivers2.jpg'), alt: 'slidercontent' },
{ id: 3, src: require('../../../resources/imgs/transducerscrewdriver/transducerizedscrewdrivers3.jpg'), alt: 'slidercontent' },
];
const koblingsskruetraekkere = [ { id: 1, src: require('../../../resources/imgs/clutchscrewdriver/clutchscrewdrivers1.jpg'), alt: 'slidercontent' },
{ id: 2, src: require('../../../resources/imgs/currentscrewdriver/currentcontrolledscrewdrivers2.jpg'), alt: 'slidercontent' },
{ id: 3, src: require('../../../resources/imgs/transducerscrewdriver/transducerizedscrewdrivers3.jpg'), alt: 'slidercontent' },
];
export default function Slideshow() {
const [index, setIndex] = useState(0);
const [source, setSource] = useState(frontpage)
/* ------ HOLDER STYR PÅ URL PATHNAME ---------*/
let location = useLocation()
useEffect(() => {
if (location.pathname == '/'){
console.log('location has changed to: homepage')
} else {
const result = location.pathname.slice(1)
console.log('location has changed to:' + result)
setSource = result
}
}, [location])
useEffect((source) => {
const timeout = setTimeout(() => setIndex((prevIndex) =>
prevIndex === source.length - 1 ? 0 : prevIndex + 1
),10000)
return () => clearTimeout(timeout)
}, [index])
return (
<div className="slideshow">
<div
className="slideshowSlider"
style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
>
{source.map(({src, id, alt}) => (
<img
className="slide"
src={ src }
key={id}
alt={alt}
/>
))}
</div>
<div className="slideshowDots">
{source.map((_, idx) => (
<div
key={idx}
className={`slideshowDot${index === idx ? " active" : ""}`}
onClick={() => {
setIndex(idx);
}}
></div>
))}
</div>
</div>
);
}
Problem is it runs into errors with line:25 (setSource = result) maybe its a bad solution im working on, but i think it can be elegant when/if it can work, but i cant seem to figure out the problem