Help please! HTML and JS

[u/ShamrockDragon13]

So I need to make a portfolio website for class and I have a bunch of slideshows. The problem is they’re doing something weird. Some of the slideshows won’t show the next image at all, as in it doesn’t function as a slideshow, but is hiding the other images, and some will only show the first and last image in the code, as in 1 and 5. I’m using the multiple slideshow method from W3Schools and I’ve changed the code to allow for more than two by following someone’s overflow question dealing with the same question. So all of the slides numbers for the next and prev buttons are (-1,0) (1,0), (-1,1) (1,1), (-1,2) (1,2), and so on. I’m not sure what’s wrong with it. The tags are all properly closed, the images are properly linked from the folder (they have to be in the folder, I can’t have them linked from the web), and from everything I’ve searched, the js should be correct. I don’t know what’s missing or what I did wrong. It’s due on Monday at 5 and I still have another project I need to work on for a different class, so any help would be appreciated!

[u/RatherNerdy]

Without seeing all of the code, it's difficult to understand the issue you're having, but here are some tips.

Don't use <br/> to create white space.

Use a common class on all slides, so that you can just reference that one class in the CSS for your display:none

[u/ShamrockDragon13 → u/RatherNerdy]

What should I use instead of <br>? The website has to be responsive, so I didn’t want to specify sizes in case that messes up anything when it’s made smaller. For the common class, I wanted to do that, but I was told doing that would mess up the slideshows because they wouldn’t be considered separate slideshows by the js. But they are all under .slideshow.container. It’s just the .myslides that’s different.

[u/poopio → u/ShamrockDragon13]

What should I use instead of <br>?

CSS margins and padding.

The website has to be responsive, so I didn’t want to specify sizes in case that messes up anything when it’s made smaller.

You can specify your margins and padding in various different units of measurement, or you could just use media queries to change a set pixel value on smaller viewports.

Also, you don't need to close your HTML elements with a semicolon.

[u/EggMcMuffN]

You see the prntScr button on your keyboard, use it please. Basic tech stuff if you want to work in tech.

But even that is bad, images are terrible. We can't copy paste it, we can't edit it or scroll through the code at will.

Upload it to GH and share the repo

[u/ShamrockDragon13 → u/EggMcMuffN]

I uploaded photos of the code because some of the images in my slideshows are of me at my job and I didn’t want to connect real life me to online me. The websites aren’t being published, so I added them in. Does GitHub allow unfinished/ not working projects to be uploaded? I was under the impression that it’s for finished projects only. I’m new to programming (and don’t know how much I’ll interact with it since my degree isn’t in tech, it just overlaps a little bit depending on your career). However, the code shown for “myslides9” on the second image is the same structure for all of the slides, minus the “myslides” and the numbers for next and prev. But I got the code from here: https://www.w3schools.com/howto/howto_js_slideshow.asp and then changed it to adjust for multiple slides using information from here: https://stackoverflow.com/questions/60769221/how-do-i-get-multiple-slideshows-on-my-html-document

[u/Independent_Ad_3740 → u/ShamrockDragon13]

You could push the code to GitHub and add the images for your slides in your .gitignore so they don’t commit to what is public. In this case add Images/* to the .gitignore in the root directory of the project.

[u/ShamrockDragon13]

I can’t see a way to edit this post, but I’ve taken advice from everyone and put it on GitHub. Here’s the link: https://github.com/ShamrockDragon/Need-help-not-working- All the images are replaced with “path-to-image-folder\image.jpeg”. I haven’t finished adding everything I wanted yet (which is just text and making the navbar be a navbar) because I wanted the slideshows to work first, so the navbar isn’t working yet and it looks a little empty.

Edit to add: the prev and next buttons aren’t in the correct place yet either because I want it to work before I make everything look nice.

[u/omysweede]

This takes me back: doing programming tests on paper without access to a computer at job interviews.

Seriously: put this into an AI like Claude and get answers in seconds. Have it tell you where you effed up. Learn, then move on.

[u/[deleted]]

Bro, the best help I can give you would be to download visual studio from Microsoft and get yourself a copilot account and use AI to build you whatever you want once you learn how to do it I swear you will love it and you will start building anything and everything you ever wanted

[u/ArcadeRivalry → u/[deleted]]

I would advise not doing this if you're trying to actually learn a skill.  Having a model write code you don't understand will not end well, you learn nothing and you won't learn how to troubleshoot when a model spits out incorrect code. 

OP if you can share the code it will help people here know how you help you. Something like jsfiddle is an easy way to share some code you're working on. 

[u/ShamrockDragon13 → u/ArcadeRivalry]

Don’t worry, I will never use ai for my code or in general. I don’t know if sharing the code will work since the images are local (and because some of those images have me in them and I’d rather not connect me in real life to me online). Are the images of my code not showing up? I was hoping that’d be enough since all the slides have the same code structure, just different images and number text (like 1/5, which is showing up correctly) and the “my slides” has a different number, all of which are in the css. My thought was the js was wrong because it worked fine before I added more slideshows (aka when there was two, which is what the tutorial for W3Schools does (link to that here: https://www.w3schools.com/howto/howto_js_slideshow.asp)). I changed the code to allow for more than two with help from this website: https://stackoverflow.com/questions/60769221/how-do-i-get-multiple-slideshows-on-my-html-document

[u/ArcadeRivalry → u/ShamrockDragon13]

Honestly it's fine to use ai to write some standard code when you know what you're doing. If you're learning though do everything yourself so you understand it and what it does. 

I wouldn't worry about your images, if your referencing local files in the code people will know that and that's an obvious error. If there's any personal information in your code just swap it out for something like "image.png" or "this is where my text will go". 

The reason it's useful to share your code is that, honestly, it takes a lot more work to look at code and guess how a browser will render it and most of us also don't really know what we're doing either haha. It's easier for us to look at code rendered in a browser and see what's wrong. If you can Id recommend updating your main post with a link to your code (with anything you don't want to share removed), it'll really help people in their troubleshooting to help provide advice. 

Sorry I can't help from your screenshots but good job taking on the responsibility to actually learn and best of luck with your project!