javascript - CSS, how can I display elements under certain conditions?

Question

I'm trying to create a website for my association (I'm new to html, css and js), and I would like to be able to display text or images under certain conditions. Let me explain: on my home page, I have a carousel that makes me scroll through 4 different images (each takes up the entire screen). And I would like, depending on the image on the screen, display different texts: as in the form of if / else if. Example: there is image 3 to display on the screen, I display "hello". If it is image 4, I display "bye". However, I don't know how to go about it, and I can't find an answer to my problem on the internet. I imagine I should be using js, but I have no idea how to go about it. Thank you so much

Answer 1

Check out this example of if/elseif/else coding:

var CurrentImageCondition = "Image1"; // A Variable Of The Current Image
var TextToSet = document.getElementById("TheIDOfYourTextElement"); // A Variable Of The Text Element To Set

if (CurrentImageCondition=="Image1"){ // If Current Image Is "Image1" Then
    TextToSet.innerHTML = "IMAGE 1 BABY"; // Do
} else if (CurrentImageCondition=="Image2") { // Else If Current Image Is "Image2" Then
    TextToSet.innerHTML = "IMAGE 2 BABY"; // Do
} else if (CurrentImageCondition=="Image3") { // Else If Current Image Is "Image3" Then
    TextToSet.innerHTML = "nooooo not image 3..."; // Do
} else { //  Else Do
    // Uh Oh ;(
}

If this isn't to your liking please let me know and I might be able to adjust it to your standards.