My automatic slideshow is not working

Hello everyone, I have been attempting to follow a tutorial from the W3C school site on how to do the automatic
slideshow and what I had wanted to do specifically was to enable each of the three images within the “slide motion”
class and the texts within the “pseudo” class to slide simultaneously, here is the code.

```
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume Builder</title>
<link rel="stylesheet" href="styles.css">



<style>
    body {
        position: relative;
        display: inline-block;
        width: 60%;
        background-image: transparent;
        background-blend-mode: lighten;
        opacity: 100%;
        background-image: linear-gradient(360deg, rgb(207, 137, 99), rgb(255, 255, 255), rgb(207, 137, 99));
        background-size: 200px;
        background-position-x: 500px;
        background-attachment: scroll;
        overflow: scroll;
        overflow-x: hidden;
    }

    .slide {
        display: flex;
        position: absolute;
        left: -100px;
        width: calc(200%+ 200px);
        height: 700px;
        bottom: 300px;
        filter: rgb(207, 137, 99);
        filter: saturate(99%);
        filter: hue-rotate(20deg);
        opacity: 100%;


    }


    .slide {
        animation-name: slide;
        animation-duration: 1.5s;
    }




    @keyframes slide {


        from {
            opacity: .4
        }

        to {
            opacity: 1
        }
    }
</style>
<h1>Sharpe's CV & Business Cards</h1>



<div id="slide-container">


    <div class="slide"> <img src="infographic-resume-template-header.png" style="width: 5500px; height: 850px;"
            alt="first slide">
    </div>
    <div class="slide">
        <img src="graphic-design-work-resume.png" style="width: 5500px; height: 850px" alt="second slide">
    </div>
    <div class="slide">
        <img src="brush-background.png" style="width: 5500px; height: 850px" alt="last slide">
    </div>
</div>

<br>
<div style="text-align: center;">
    <span class="pseudo">Inexpensive designs and quality.</span>
    <span class="pseudo">Diverse and professional styles.</span>
    <span class="pseudo">Catering to your professional and academic needs.</span>
</div>




<!--This is where the cover banner for website should be -->

<nav id="backg3">
    <p class="logo" style="top: 900px;"><strong>Giving credentials a Sharper edge.</strong></p>
    <nav></nav>
    <nav></nav>
    <nav></nav>
    <nav></nav>
    <nav></nav>
    <nav></nav>
    <nav></nav>
    <nav></nav>
    <nav></nav>
    <nav></nav>
</nav>



<div>
    <div class="businesscard">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>



<div class="Tab1">
    <a href="ggggggg">
        <p>About</p>
    </a>
</div>

<div class="Tab2">
    <a href="ggggggg">
        <p>Contact</p>
    </a>
</div>

<div class="Tab3">
    <a href="ggggggg">
        <p>Resume Type</p>
    </a>
</div>

<div class="Tab4">
    <a href="ggggggg">
        <p>Business Cards</p>
    </a>
</div>


<script src="myscript.js">



    let slideIndex = 0;
    showSlides();
    function showSlides() {
        let i;
        let slides = document.getElementsByClassName("slide");
        let text = document.getElementsByClassName("pseudo");

        for (i = 0; i < slides.length; i++) {

            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) { slideIndex = 1 }
        for (i = 0; i < text.length; i++) {
            text[i].className = text[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        text[slideIndex - 1].className += " active";
        setTimeout(showSlides, 2000); // Change Image every 2 seconds
    }

</script>
```

While it is interesting, are you having any trouble with this? If so, what difficulties are you running into? Additionally what is happening versus what do you expect to happen?

We can’t help you unless you describe your issue.


ok understand and thanks for responding that quickly my main trouble was the function not working by function I mean the entire slideIndex loop for both classes the html class elements I mentioned will neither be called for nor return on command when I attempt to use the block of code to enable the slide show automatically. I am expecting to see each line of text on each image , one at a time .

In the image i attached to the previous reply that is what I dont want to have happening, this is however what I am trying to accomplish for each front page slider , but the texts are all appearing together their not each interchanging with each of the slides at simultaneously