Skip to main content

Making a Tourism Slideshow With HTML/CSS/JS (Ft. TraversyMedia)

 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

.buttons button#next
.buttons button#prev

But the code didn't work! The buttons were still as follows:

 

  • Unstyled
  • 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:

.slide {
    positionabsolute;
    top0;
    left0;
    width100wh;
    height100vw;
    opacity0;
    transition: opactiy 0.5s ease-in-out;
}

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.

.slide {
    positionabsolute;
    top0;
    left0;
    /* I had w/h as vh and vw and what an issue */
    width100%;
    height100%;
    opacity0;
    transition: opacity 0.5s ease-in-out;
}

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!


Retweet?


Comments

Popular posts from this blog

What Do You Need? [AKA; List of Offered Services / My Next Role] (2020)

I am a trusted outsourced remote consultant for your company.   I enjoy having the flexibility to take on temporary projects from time to time! I start at part-time, temp work for now. If we like each other, we can renegotiate. If anything sounds weird, out there, or unusual - Feel free to e-mail me .  3 Services Offered Writing :      You want to pay me to write more of *waves hand* this blog? I am game .     I write B2C e-mails going out to over 280 people weekly. [ Example Job Description ]        Auditing :        Something doesn't work on your page or in your app. I can find it, or you can lose business. [ Here ] [ Example Job Description ]   I really enjoy testing apps and webpage concepts! I have an iPhone and Android phones ready. Technical: Still as-needed, always remote, contract, or temporary. IT Operations Tech [ Example Job Description ]     Hardware and SaaS support.     Cisco routing and switching (Networking). CCNA, A+, Sec+, Azure certified WORKING ON: Junos

Portfolio of UX/Product Feedback [Vol. 1]

I browse websites and apps, while making note of things I find frustrating for end users. You have probably been linked here from a form or my resume. If you have any questions about what I'm looking for in a role, click here .   This post is not to shame, but to point out errors and hopefully make my talent for finding and documenting such mistakes clear to someone hiring. Contents: Instances where I offer constructive feedback on someone's website, logo, or app. Actions that were taken by the developers or artists.  I'm glad you want your webpages to be the best they can be with my help; If you need your sites audited, e-mail me . Latest Update -  November 20th, 2020.   Vol. 2 is here .

Contactless Tech’s Role in the New Guest Experience ft. Intelity and The George

 Contactless hospitality technology is growing. You want to get away, and you'll be damned if a little thing like a deadly virus will stop you! But you still don't want to touch things. Ew. During the chat between INTELITY CEO Robert Stevenson and THE GEORGE Director of Operations Kerrie Hunter, you’ll learn how the historic boutique hotel has adapted a mobile-first guest experience in the wake of COVID-19—and how they see contactless technology affecting the future of hospitality. I don't remember how I found INTELITY (probably hoping to score a position with them), but I liked them enough to stay on the e-mail lists.