getting captions to show up and move along with pictures in a slideshow using figcaption, JS

40 Views Asked by At

I'm a total JS beginner. This is my first shout out for help, please be kind... :o

I've made a JS slideshow, but my figcaptions don't change with the slideshow. Very weirdly, it's not even that the captions don't change-- all the captions show up for every photo, even when you press the "forward arrow" or "back arrow" button. Here's the code as it currently stands:


<div class="carousel">

  <button class="carousel\_\_button carousel\_\_button--back" onclick="plusDivs(+1)">&#10095;</button>

  <div class="carousel\_\_track-container">
    <img class="carousel\_\_images" src="[https:/](https://Slide1.jpg?raw=1)/A" alt="Description1" width=600px>
    <img class="carousel\_\_images" src="[https:/](https://Slide2.jpg?raw=1)/B" alt="Description2" width=600px>
    <img class="carousel\_\_images" src="[https://](https://Slide3.jpg" alt="Description3" width=600px>
  </div>

  <button class="carousel\_\_button carousel\_\_button--forward" onclick="plusDivs(-1)">\&#10094;</button>
</div>

<!-- JS is below -->

<script>
  var slideIndex = 1;
  showDivs(slideIndex); & #x200B;

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

  function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("carousel\_\_images");
    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";
  }

  function myFunction() {
    var element = document.body;
    element.classList.toggle("dark-mode");
  }
</script>

Soooo..... I've tried putting a figcaption below each image, like this:

<img class="carousel\_\_images" 
     src="[https:/](https://Slide1.jpg)/A" alt="Caption1"
     width=600px> 
<figcaption="Caption1">

I've also tried making a JS function that is more or less identical to the one above, except it moves the captions except the photos.

neither work.

I need the captions to display below each photo, and changing when you click the photo.

0

There are 0 best solutions below