Avatar billede Hebsgaard Praktikant
09. juni 2022 - 12:36

Tekst på billeder i image slideshow

Hej. Jeg har et problem med at få tekst med på mine billeder i min image slider, hvor teksten skifter sammen med billederne.
Jeg har siddet med det længe og kan simpelthen ikke lige finde ud af hvordan jeg skal få tekst med på billederne. Jeg smider lige min kode herunder. Jeg arbejder i React.js.

import './slider.scss'

import Img1 from '../assets/hero2.jpg';
import Img2 from '../assets/fliserensning.jpg';

import { useState, useEffect } from 'react';


const Slider = ({duration = "5000"}) => {

    const [imgArr] = useState([Img1, Img2])
    const [activeIndex, setActiveIndex] = useState(0)

    useEffect(() => {
        var timeout = setTimeout(() => {
           
           
            if (activeIndex < imgArr.length -1) {
                setActiveIndex(activeIndex +1);
            } else {
                setActiveIndex(0)
            }
           
        }, duration);
        return () => {
            clearTimeout(timeout)
        }
    }, [activeIndex]);
   

    return (
        <section className='slider'>
            <ul>
                {
                    imgArr?.map((item, index) => (
                        <li className={index === activeIndex ? "active" : ""} style={{backgroundImage: "url(" + item + ")", animationDuration: duration + "ms" }}>
                            <img hidden alt="hero" src={item}/>                        </li>
                    ))
                }
            </ul>
        </section>
    )
}

export default Slider;
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester