Glide.JS

Dit is het resultaat van de reeks met Glide.JS. Je ziet hier een slider, die het scherm volledig vult.
Er wordt gebruik gemaakt van Glide.JS en het script en de stijlen worden aangepast en aangevuld.

Glide.JS is een slider, die op jQuery is gebaseerd. Je kunt de slider via Google vinden bij http://jedrzejchalubek.com/glide/.
Na download vanaf GitHub, nemen we de dist-map waarin onze benodigde js- en css-bestanden staan. We maken de pagina volgens de handleiding op GitHub. Let daarbij op dat de mark-up overeenkomt met de benodigde div's volgens de handleiding, dat de stijlen en scripts gekoppeld zijn en dat er een initialisatie van het glide-script toegevoegd is.

Om elke slide een eigen achtergrondafbeelding te geven, geef he elk een eigen id.
Daarmee kun je in het stijlblad de achtergrond instellen.
De gekozen afbeeldingen zijn erg groot. Om ze de slide te laten bedekken zet je backbround-size op cover.

De stijlen moeten worden aangepast. Je ziet nog duidelijk de list-style van de ongeordende lijst.
We zoeken die selecteer in het stijlblad dus op en vogel toe: list-style: none.
Ook zetten we de marge en de padding daarvan op 0.
De kop en de de paragraven in de slices kunnen daarentegen zeker wel paddings gebruiken.
Om de slider goed tegen de randen van de pagina's te plaatsen moeten ook de padding en marges van de body en de html-tag op 0 gezet worden.
De teksten, die de slider naar links of rechts doen schuiven moeten worden aangepast... Dat kan eenvoudiger door de normale (niet geminimaliseerde) versie van het script te koppelen. Deze koppelen we dus en we passen daar de basisinstellingen aan.

De stijlen moeten worden aangepast.
Je ziet nog duidelijk de list-style van de ongeordende lijst.
We zoeken die selecteer in het stijlblad dus op en vogel toe: list-style: none.
Ook zetten we de marge en de padding daarvan op 0.
De kop en de de paragraven in de slices kunnen daarentegen zeker wel paddings gebruiken.
Om de slider goed tegen de randen van de pagina's te plaatsen moeten ook de padding en marges van de body en de html-tag op 0 gezet worden.

Als je het stijlblad bestudeert, zie je dat de hoogte van de slider wordt vastgelegd in de div met class slider.
Met jQuery gaan we die hoogte aanpassen aan de hoogte van het venster.
Bij de initialisatie is .slider al geselecteerd. We kunnen daar die regel dus aanvullen met
.css('height', $(window).height());

Verfraai jouw training door de inhoud op de slides aan te passen en gebruik te maken van webfonts voor de teksten in de koppen.
Stuur mij afloop een linkje met het het resultaat dat online staat.