Skapa slideshow

[esplito]

Specifikation - Skapa slideshow

Uppgift

• Skapa HTML och CSS för slideshow
• Gör det som en Vue component så att det kan återanvändas
• Lägg in funktionalitet m.h.a. javascript om det behövs (kommer förmodligen behövas lite grann)

Tänk på att jobba mobile-first! dvs. allt som ska synas på skärmar större än mobil ska finnas i media queries. Se wikin för hur du använder mixins (som är fördefinierade media queries).

OBS! Proxima Nova och Minion Pro använs som fonts i designen. De kostar pengar, så vi använder Montserrat och Times New Roman istället, för tillfället.

Krav

• [x] Slideshowen ska vara uppbyggd så att det går att implementera efter headern på vilken sida som helst.
• [x] Den ska kunna ha max 5 stycken slides
• [x] Man ska kunna klicka på cirklarna för att byta slide
• [x] Text och bild ska ändras när man byter slide
• [x] Bilden ska alltid fylla upp hela sliden
• [x] Texten ska kortas av om den är för lång. (... läggs då på slutet)
• [x] "Läs mer"-knappen ska ändra länk beroende på vilken slide som visas. (Tänk på att knappar kommer att återanvändas på sidan)
• [x] Pilarna ska kunna användas för att bläddra genom slideshowen (desktop)
• [x] Det ska ligga ett mörkt lager bakom pilarna som har sänkt opacity så att pilarna syns tydligare, oavsett bild som ligger i sliden. (desktop)
• [x] Slideshowen ska automatiskt byta slide efter några sekunder. (Vi testar oss fram lite på antalet sekunder)
• [x] Det ska gå att klicka på bilden för att skickas vidare till den länkade sidan
• [x] I mobil ska inte pilarna synas. Istället ska man kunna swipea i slideshowen
• [x] Bild och länk ska hämtas från WP Rest API

Design

Desktop: Mobile:

Material som kan vara intressant

• CSS Scroll Snap
• Exempel med Vue (Inspiration)
• Flexbox and Truncated Text
• Truncate String with Ellipsis

Kontext

Desktop:

Mobil:

[esplito]

Den är implementerad nu. Behöver bara lösa så att dess innehåll hämtas från WP Rest API.

[esplito]

Gjorde lite småfix precis, så att bannern med knappen är en del av slideshow. Nu ska det bara koppla till WP Rest API så att man kan ändra bild, text och länk för varje slide.