Fotogalleri

Skip to content

Vanskelighetsgrad: Medium

I denne oppgaven skal du lage en nettside med et fotogalleri i form av et slideshow.

Ting du skal ha med:

  • ✅ To knapper
    • En som går til forrige bilde
    • En som går til neste bilde
  • 🖼️ Lagre bilder i en mappe som heter “bilder”, og gi dem navn som 0.png, 1.png, 2.png, 3.png også videre.
    • Dette kan være bilder du har tatt selv, eller bilder du finner på nettet. Du kan finne en haug med bilder fra Pexels.
  • 🖼️ Et bilde-element. Gi dette elementet en “ID”.
  • 🧑‍💻 Et script som kontrollerer hvilket bilde som vises.
    • Scriptet skal ha to funksjoner, en som går til neste bilde og en som går til forrige bilde.
    • Scriptet skal bytte ut src-attributten med det nye bildet.

Pass på!

Pass på når du når enden av lista så går bildet tilbake til start. Altså, hvis siste bilde er 3.png så går du tilbake til 0.png. Og motsatt hvis du er på 0.png går du til 3.png.

Pass også på at filnavnene slutter på rett type: .png er ulikt fra jpg!!

Ekstra utfordringer: Hard

  • Gjør det slik at bildene kan ha hvilket som helst filnavn.
    • Her kan dere ha alle bildene allerede på nettsiden i for eksempel en <div> og deretter bytte på hvilke elementer som er gjemte eller ikke.
  • Legg til kode som gjør at alle bildene får lik høyde. (Bruk CSS!!)