How To Add Names Of Every Image In Slider?

I want to add some names for my images in slider in HTML, but I can't do it correctly. Please help me with that. Link below:

https://codepen.io/Lynthius/pen/OJJMENw

<!-- START PROJECT SECTION -->
        <section id="projects" class="section__projects">
            <div class="project__sliders">
                <button class="button__left" onclick="plusDivs(-1)">&#10094;</button>
                <a target="_blank" rel="nofollow noreferrer" href="#">
                    <img class="slider" src="https://i.ibb.co/D4N1WhT/paw.jpg" alt="cat" border="0" width="2500px">
                    <p class="project-title">PROJECT 1</p>
                </a>
                <a target="_blank" rel="nofollow noreferrer" href="#" class="projec-title">
                    <img class="slider" src="https://i.ibb.co/RBP7Ykd/mysz.jpg" alt="cat" border="0" width="2500px">
                    <p class="project-title">PROJECT 2</p>
                </a>
                <a target="_blank" rel="nofollow noreferrer" href="#" class="projec-title">
                    <img class="slider" src="https://i.ibb.co/JmGDZKy/mac.jpg" alt="cat" border="0" width="2500px">
                    <p class="project-title">PROJECT 3</p>
                </a>                    
                <button class="button__right" onclick="plusDivs(1)">&#10095;</button>
            </div>

You can achieve that by modifying your showDivs function like so:

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("slider");
  var x1 = document.getElementsByClassName("project-title");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
    x1[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";  
  x1[slideIndex-1].style.display = "block";
}