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

Connecting IoT Devices to a Registration Server (Packet Tracer, Cisco)

In Packet Tracer, a demo software made by Cisco Systems. It certainly has changed a lot since 2016. It's almost an Olympic feat to even get started with it now, but it does look snazzy. This is for the new CCNA, that integrates, among other things, IoT and Automation, which I've worked on here before. Instructions here . I don't know if this is an aspect of "Let's make sure people are paying attention and not simply following blindly", or an oversight - The instructions indicate a Meraki Server, when a regular one is the working option here. I have to enable the IoT service on this server. Also, we assign the server an IPv4 address from a DHCP pool instead of giving it a static one. For something that handles our IoT business, perhaps that's safer; Getting a new IPv4 address every week or so is a minimal step against an intruder, but it is a step. There are no devices associated with this new server; In an earlier lab (not shown), I attached them to 'H

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

UPDATED 2021 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 , because I probably think it's awesome. 3 Services Offered Technical: Cloud Technician     Azure [ See tag ] Subcategories: Infrastructure As Code (Specifically Terraform/Azure and CloudFormation/AWS ) Azure Networking I really like the Azure space, and will continue down that path.  Support [Web: Example Job Description ] [Text : Example Description ]     I help you with adjustments in HTML, CSS, and Javascript.     When you email a business a question and they answer? That's me.   Auditing :  Something doesn't work on your page or in your app. I can find it. [ Here ] [ Example Job Description ]   I really enjoy testing apps and webpage concepts! I have an

The Webpage: Zero Grocery

 I have always liked the idea of a grocer where I can get a small amount of what I need to try a recipe. I don't need 4lbs of sugar for 12 cookies. Some places used to operate like that, buying things in "Stick it in your bag amounts and we'll weigh it." (RIP, Lucky's Market).  Zero Grocery is the next best thing, offering delivery of food, spices, and underground culinary treats to your (California only) doorstep in reusable containers.      You may be thinking that in the times of COVID, people would be hesitant about reusing glass jars strangers have stuck their fingers in. Not so ; [CEO, Zuleyka] Strasner says that customers haven’t been squeamish about reusable packaging during the pandemic. You don't need an account or subscription to browse the goodies , though you will need a zip code in their delivery range to stick them in the basket.  Come with me as I step through my first impressions of the site here - There's a lot to like. This is not a spo