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] (2020)

I am a remote consultant.   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 . Doesn't have to be tech-related. I just have to find it interesting and flexible. Services Offered Writing about tech [ Example Job Description , 2 , 3 ]      You want to pay me to write more of *waves hand* this blog? I am game .   Email Marketing Specialist [ Example Job Description ]       I write B2C e-mails going out to over 280 people weekly.   Technical Analyst [ Example Job Description ]      Let me find out what works and what doesn't for your internal software.    IT Operations Tech [ Example Job Description ]     Hardware and SaaS support.  Web Support [ Example Job Description ]      I help you with adjustments in HTML, CSS, and Javascript. Text-based support [ Example Description ].           Wh

Azure Networking Options - Core Cloud Services

I have done a lot of AWS things on here. Time to give Azure some attention. After all, since employers don't think Cisco or COMPTIA certifications are important, maybe Microsoft ones are? First, let's really think about why these are the two biggest cloud services providers in the world: They've been doing internet things for a long time. Amazon launched in 1995 , a virtual bookstore. Microsoft, well, you know.  They've lived, breathed, and frankly, created, infrastructure that we use today, that they're selling to us today. Of course the Store of Everything and the Company of Everything would encourage us to put everything in their hands. Also: Azure has a lot less silly names for modules. Important. I appreciate straightforwardness. I said 'a lot less', not '100% sensible names' Microsoft has a clear set of Azure Fundamentals that anyone can interact with. Let's talk about networking basics, basically to say, again, &quo

Portfolio of UX/Product Feedback {Updated: November 20 2020}

Have You Looked at Your Webpage From the Customer's View Lately? 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.