SIMPLE SLIDESHOW
This produces a simple slideshow from a set of images. It will check at load if the window is desktop or mobile and load the slideshow appropriate to the screen size.
To run this:
-
prepare your images - they will be displayed with 'object fit: contain' (stle.css #current-slide properties), so bear this in mind when making images. Canva can resize slides. Note that slides are shown as images, so no text resizing or reflow of elements is available, which means the slides should be readable for the screen size.
-
put slides, named numerically (eg: slide1, slide2...) in the right folder, desktop or mobile size.
-
make sure you have nodejs installed (easy enough and available free) - in a terminal you can run node --version and npm --version to check and if not then Google it, it's not hard to install.
-
open a terminal in the slideshow directory or navigate to that directory in the terminal
-
run the following commands in the terminal whilst located in the directory - npm install and then npm run build
-
You should then have a working slideshow. You will need to copy the files in the /dist directory (not the main project directory) to a directory on a webserver to serve them online.