JavaScript — Introduktion genom exempel

13.6 Slideshow

Detta exempel innehåller en s.k. slideshow (eller bildspel), där man kan bläddra mellan olika slides. I del a är det slides med text och i del b slides med bilder. Innehållet ändras dock endast i HTML-koden, medan JavaScript-koden är densamma i båda delarna. Bläddringen mellan olika slides görs genom att man kan svepa med pekaren åt vänster eller höger. Det finns också kod, för att kunna bläddra med piltangenterna.

Sammanfattning

I HTML-koden finns ett div-element som utgör den ruta där bildspelet visas. Storleken på denna är densamma som storleken på en slide, så att endast en slide i taget visas. I CSS-koden används overflow:hidden, så att det som hamnar utanför rutan inte syns.

Inom detta div-element finns ytterligare ett div-element som omger alla slides. Detta kallas wrapper i JavaScript-koden. Inom detta ligger alla slides som varsitt div-element. Dessa positioneras inom wrapper med flex, så att de utgör en rad där alla slides ligger intill varandra. Då man bläddrar till nästa eller föregående slide, är det elementet wrapper (dvs hela raden) som förskjuts i sidled.

För att hålla reda på vilken slide som visas används en variabel kallad currentIx, som är index för den slide som visas. En annan variabel kallad slideWidth innehåller bredden på en slide. Antalet pixlar som wrapper ska förskjutas blir då -currentIx*slideWidth. Det blir ett negativt värde, eftersom hela raden förskjuts åt vänster.

I övrigt är koden, för att detektera ett svep och göra förskjutning, likadan som i exempel 13.4 del d, där denna gest introducerades.

Uppdatering om fönstret förändras

Om man har en mobil eller surfplatta och vrider på den ändras bredden på sidan och därmed kan även bredden på en slide förändras. Denna rörelse genererar händelsen orientationchange och en funktion anropas för att uppdatera variabeln slideWidth och visning av aktuell slide. Denna funktion anropas också på händelsen resize, som inträffar om användaren ändrar storlek på webbläsarens fönster.

Egna övningar

I test-filerna finns en kopia av bildspelet, där man sveper en slide i taget. Du ska nu modifiera CSS-koden och JavaScript-koden, så att flera slides visas samtidigt och man sveper då så många slides som visas. I "full" storlek ska det vara fyra slides, men sidan har en responsiv design, så beroende på fönstrets bredd kommer det vara mellan en och fyra slides som får plats.

Du ska göra följande ändringar i test.css och test.js, men öppna först upp test.html i Live Server, så att du efter varje steg kan följa förändringarna i webbläsaren.

• CSS-koden i filen test.css:
  Här gör du exakt de ändringar som beskrivs nedan, för att ändra storleken på rutan med kategorierna, så att flera "slides" visas samtidigt.
  • I regeln för #imgViewer ändrar du max-width till 100%.
  • I regeln för en enskild slide, dvs .slideshow .slide ändrar du flex till 0 0 200px och height till 120px.
  • I regeln för .slideshow img ändrar du max-height till 70%.
• JavaScript-koden i filen test.js:
  • Deklarera en global variabel kallad nrOfSlides. Den ska sedan innehålla hur många hela slides som visas samtidigt.
  • I funktionen showSlide lägger du till en rad för beräkning av nrOfSlides, som ska vara wrapperElem.offsetWidth / slideWidth avrundat nedåt till ett heltal.
  • I funktionerna shiftToPrevious och shiftToNext ändrar du if-satserna, så att currentIx minskas eller ökas med nrOfSlides istället för 1, under förutsättning att det finns så många slides kvar att skifta, annars sätter du currentIx till 0 repektive maxIx.
    • Du behöver alltså ändra i if-satsernas villkor och lägga till en else-del.

Testa nu att det fungerar att skifta flera slides åt gången. Testa både på vanlig dator med mus och i mobilen med pekskärm. På datorn kan du också ta fram följsamt designläge och testa med olika storlekar på fönstret, så att det visas två, tre eller fyra slides.

Det ska se ut på följande sätt. Vid skift åt vänster ska "Äpple" till "Citron" svepas bort och nästa bild, "Apelsin", ska bli den som visas längst till vänster.