Haven't slept and am super worried about petie because he can't have his meds on an empty stomach.

... so I guess the best thing to do right now is to tinker with my spice section on my website  

https://www.jenniegyllblad.com/

Jennie Gyllblad - Comicatrix

EDIT:
Thank you all for the floods of help! Hope I can implement a fix first thing tomorrow! (Exhausted right now)
-‐---

Any coding nerds around (Who don't mind looking at NSFW art?)
My brain is not really at its... peak atm, and I can't figure out why my simple manual slideshows don't work in the taster section:

https://www.jenniegyllblad.co.uk/tasters.html

#CssHelp #WebsiteHelp #Coding #Beginner

Jennie Gyllblad - Comicatrix

Thank you all again!
Sorry I haven't replied properly, am running on very little sleep and maximum distress!

But at least my website taster section should work now (thanks @neil ) So you can flick through my spice with ease! No popups or anything!

@JenJen From what I can see, this is not working on the first carousel only.

I think this is because the second carousel ovewrites the javascript functions with name "showDivs" so all calls to it change just the second carousel.

for a very quick hack, go to the div for the second carousel and rename the functions from plusDivs to plusDivs2 and showDivs to showDivs2 (including the onclick on the buttons). It should work.

Does this make sense?

gist:e79213b1a97ce16f14c930191f98a108

GitHub Gist: instantly share code, notes, and snippets.

Gist
@JenJen I think what's broken is that you have three sets of indistinguishable slideshows, all with the same name, all defining the same JS function, so what happens is that the last one takes precedence for all of them. A solution that is a bit β€œquick and dirty” is to assign an id to each of the divs that act as containers for the slideshow, add an argument to the plusDiv function that is the id, and make the buttons onclick call plusDiv with the id.

@JenJen this is probably all a bit confusing the way I expressed it, so here's it in practice (I'm removing the classes for brevity, you should keep them)

<div class="..." id='greenfairy'>
(your imgs here)
<button class="..." onclick="plusDiv(-1, 'greenfairy')">
<button class="..." onclick="plusDiv(1, 'greenfairy')">
</div>

and the JS:

var slideIndex = {};
slideindex['greenfairy'] = 1
function plusDivs(n, m) { showDivs(slideIndex[m] += n, m) }

(continued)

@JenJen
The body of showDivs is largely unchanged. Only the signature is now

function showDivs(n, m)

and

var x = document.getElementById(m);

and all references to slideIndex should become references to slideIndex[m].

Also make sure you only have ONE declaration of slideIndex, plusDivs and showDivs, the other JS should only assign slideIndex[...] = 1 for each of the IDs of the DIVs.

@JenJen From what I can see, you have way too many <body> tags. <style> tags should be in the <head> portion, ideally just merge every style into one. Your <header> is outside of <body>. Ideally <script> should be at the bottom before </body>. I'm not sure if that's why the slideshows don't work, but you also specify the same variable slideIndex = 1; for each slideshow. I'd first fix the multiples of html tags :)
@JenJen Ok, I tried a quick fix and it seems to be working :) https://jsfiddle.net/8432s7md/ The slideshow scripts could be coded better, but I did this fast. πŸ˜…
Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

@JenJen When you try to flick through the top two, you end up flicking through the bottom one.

You have a javascript onclick handler on your left and right buttons and each one is calling the same method with the same parameter (plusDivs(1)).

This calls showDivs, with a new index (+1/-1).

showDivs is looking mySlides in your body.
document.getElementsByClassName("mySlides").
It's /*always*/ looking for mysides.

Your top collection is mySlides, your middle collection is mySlides2 and your bottom collection is mySlides3.

If you change your onclick handler from plusDivs(1) to plusDivs (1, "mySlides/mySides2/mySlides3"), showDivs(slideIndex) to showDivs(slideIndex, targetClass), and var x = document.getElementsByClassName("mySlides"); to var x = document.getElementsByClassName(targetClass);

then each button will know which class to target and it should work per slideshow.

@JenJen
There you go : the solution was on W3Schools all along :)
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_two
You have just forgotten a few lines of js code to handle your different slides, that's all (it seems).
W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser