Why won't the first image at first when loading the page? What is wrong with my javaScript?

Question

I am working with wordpress theme twenty twenty-one for the first time and trying to create a slide show of images.. The problem that I am having is that when the page first appears no image is shown. When you click on the button then the first images shows up. Also when you get to the last image I want the first image in the array to show up, but instead no image shows up and you would have to click on the "previous arrow button" that I have created to see the last image again. First time working with the wordpress theme so I am thinking that something is overriding my script or that my script is wrong.

<div>

   <img class="exe1-img" 
   src="https://www.ttttea.co.uk/wp-content/uploads/2021/05/fullsizeoutput_8ca.jpeg" alt="">

   <img class="exe1-img" src="https://www.ttttea.co.uk/wp-content/uploads/2021/05/fullsizeoutput_945.jpeg" alt="">


  <button class="previous-img" onclick="plusDivs(-1)">❮ </button
  button class="next-img" onclick="plusDivs(1)"> ❯</button>

</div>

<script>
    let slideIndex = 1;

        showDivs(slideIndex);

        function plusDivs(n) { 
           
            showDivs(slideIndex += n);
}

       function showDivs(n) {
            let i;
            let x = document.getElementsByClassName("exe1-img");

            if (n > x.length) {
                slideIndex = 1
            }        
            if (n < 1) {
               slideIndex = x.length
            }        
            for (i = 0; i < x.length; i++) {
               x[i].style.display = "none";   
            }
            x[slideIndex-1].style.display = "block";  
            }
</script>

Had also had an issue with getting the automatic p tags out of the code in wordpress so had to write the script in single line. Apologies for the readability.

Answer 1

After replacing the images (yours were not resolving) and fixing the broken tags (which I think was an artifact of the way it was pasted into your question without using the {} button), it seems to work. Look at the snippet below and see if it's not doing what you want it to.

 let slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { let i; let x = document.getElementsByClassName("exe1-img"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length } for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex - 1].style.display = "block"; }

 <div> <img class="exe1-img" src="https://images.unsplash.com/photo-1621343498292-eb469c743b25" height='100' alt=""> <img class="exe1-img" height='100' src="https://images.unsplash.com/photo-1621347797284-abb4b9d4ad40" alt=""> <button class="previous-img" onclick="plusDivs(-1)">❮ </button> <button class="next-img" onclick="plusDivs(1)"> ❯</button> </div>