Templates, met Flickity

Aan te passen data-flickity stukje (nog even bespreken hoor)

Note: Opties die hier niet tussen staan moeten een standaard instelling hebben. Die zullen op default kunnen, tenzij ze standaard in ons systeem niet default moeten (zet ik hieronder nog wel)

  • pageDots: true/false (stipjes onder carousel)
  • wrapAround: true/false (zorgt voor infinite scroll)
  • autoPlay: 2000/false (zet autoplay uit of op vaste tijd van 2 seconden)
  • cellAlign: left/center/right (zorgt voor de uitlijning van de slides t.o.v. het frame)
  • prevNextButtons: true/false (haalt de pijltjes weg)

Niet aan te passen maar niet Flickity default

  • selectedAttraction: 0.015
  • friction: 0.35
  • "arrowShape": "M 70 80 L 40 50 L 70 20 L 60 20 L 30 50 L 60 80 Z"

Aan te passen opmaak (CSS)

  • Overlay
  • Met of zonder schaduw
  • Verhouding meest gebruikvriendelijk voor de gebruiker om deze op de foto's te zetten ipv op de viewport
  • Pijltje kleur (standaard + hoverkleur)
  • Pijltje wel of niet met achtergrond (en kleur? :OOO)
  • Zoom op foto (Ja/Nee)

Aan te passen inhoud

  • Titel + opmaak
  • Tekst + opmaak
  • Knop + Knop opmaak
  • Uitlijning van inhoud (of dat gewoon bij de opmaak van titel,tekst,knop houden)
  • Afbeelding + link
  • Aantal slides tegelijk zichtbaar heel getal invullen (1 = 100%, 2 = 50%, 3=33.333333333infinity% etc) - mobiel en desktop los van elkaar want 2+ op mobiel wordt vaak lelijk.

Universele CSS (voor alle templates)

css arrow

Template 1 (alleen fotos)

CSS Template 1

Template 2 (titels)

CSS voor Template 2

Template 3 (titels+tekst+knop)

CSS voor Template 3

Template 4 (titels + tekst)

CSS voor Template 4

Template 5 (tekst eronder)

CSS voor Template 5

Template 6 (tekst eronder maar niet 100% breedte)

CSS voor Template 6

Template 7 (tekst eronder maar niet 100% breedte)

CSS voor Template 7

Template 8 (tekst eronder 100% breed, schaduw, zoom)

CSS voor Template 8

Template 9 (alleen tekst)

CSS voor Template 9