Linked Questions

Popular Questions

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

Related Questions