Video for reference here.
I'm one to encourage good rest over constant work.
Yet I found myself awake at 2 AM listening to this video by TraversyMedia, because I was suddenly curious about making a full page image carousel.
I wanted to listen before I put hand to keyboard in coding, so at around 3 AM, I pulled up my machine with an idea.
I followed the instructions and did most of the code myself. Here, I outline:
- The changes in my code from the original.
- The demo mockup (Here)
- The changes in the new Tourism: Welcome to Babylos! .The images may take a moment to load at first.
The original video code says
But the code didn't work! The buttons were still as follows:
- At the bottom
So I removed the .buttons part and everything was placed and styled appropriately.
It took a while to get the image to be full screen;
My original code was:
Oops - I misspelled 'opacity' in the transition. No wonder it didn't work in the code! 😆 Fixed now!
See width and height? It shouldn't say wh and vw, but 100% for both.
Spelling; Achieved 👍🏾
Image-wise, it all comes from my copy of Animal Crossing; New Horizons and editing in Paint.net.
The size of the image around 1600 x 769. The initial images I had were stretched to fit. Some (Marcel's) were easy to resize.
One (Static's) needed only a small adjustment of the clothing images and no resizing!
Others (Opal's) was so unusually difficult, as layers began to cross and bleed into each other. I had to remake that one entirely.
In the future, I'll measure twice (or, at all...) and cut once.
Links do not work in the first slide of the show. Not sure why.
I kept going "I'm gonna need another panel". Hence how this grew from 3 small slides to 8. It was very fun, and I'll probably do more 3 AM coding in the future.
Remember: I'm available for consulting, temp roles.
Now Featured on Bridges in Tech!