Change text according to slide image

Question

Hello,

I’m dealing with HTML/CSS, I went to make a slide and I came up with a question, probably Javascript.

I made a mini slide of featured products, and next to this slide, there’s the text referring to the product. There is some way to treat the slide, so that when one clicks to change the slide image, the text changes along with the image?

var slideIndex = 1;
showDivs(slideIndex);

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

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  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 class="large-12 columns">
  <div class="w3-content" style="max-width:100%;position:relative; padding: 5px;">
    <div class="container">
      <div class="row">
        <div class="large-7 columns" style="margin-top: 50px;">
          <img class="mySlides" src="http://niderarep.com.br/wp-content/uploads/2013/04/logo-quero-grande.png" style="width:100%">
          <img class="mySlides" src="https://img.meutimao.com.br/_upload/forumtopico/2016/01/28/eduardo-jorge-quero.jpg" style="width:100%">
          <img class="mySlides" src="http://m.memegen.com/0ekn13.jpg" style="width:100%">
          <img class="mySlides" src="http://www.rstche.com.br/imagens/quero-quero.jpg" style="width:100%">

          <a class="w3-btn-floating" style="position:absolute;top:50%;left:0" onclick="plusDivs(-1)">❮</a>
          <a class="w3-btn-floating" style="position:absolute;top:50%;right:0px" onclick="plusDivs(1)">❯</a>
        </div>


        <div class="large-5 columns" style="margin-top: 50px;">
          <h3>Título produto em destaque</h3>

          <p style="line-height: 2.0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <a href="http://www.wgmodelo.com.br/index.html">
            <button style="float:right; background: #000;">Saiba mais</button>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Grateful from now on.

Answer 1

You meant "content," not "text," right? The best way to do this is by creating containers for each image sequentially, which can be hidden or expanded, as in your code:

<div class="large-5 columns" style="margin-top: 50px;">
    <h3>Título produto em destaque</h3>
    ...
</div>

With this you can give a new class for each div, containing a preset name and the number of the image to which the div belonging.

Let’s assume that each div will have the class image-[número] and the display: none.

<div class="large-5 columns image-1" style="display: none; margin-top: 50px;">
    <h3>Conteúdo da primeira imagem</h3>
    ...
</div>

<div class="large-5 columns image-2" style="display: none; margin-top: 50px;">
    <h3>Conteúdo da segunda imagem</h3>
    ...
</div>

<div class="large-5 columns image-3" style="display: none; margin-top: 50px;">
    <h3>Conteúdo da terceira imagem</h3>
    ...
</div>

<div class="large-5 columns image-4" style="display: none; margin-top: 50px;">
    <h3>Conteúdo da quarta imagem</h3>
    ...
</div>

Now, to change content just take the div with the class image-[slideIndex] and set the style property display: block;.

function showDivs(n) {
    var x = document.getElementsByClassName("mySlides");

    if (n > x.length) slideIndex = 1;
    if (n < 1) slideIndex = x.length;

    for (var i = 0, len = x.length; i < len; i++) {

        x[i].style.display = "none";
        document.getElementsByClassName("image-" + (i + 1))[0].style.display = "none";

    }

    x[slideIndex-1].style.display = "block";
    document.getElementsByClassName("image-" + slideIndex)[0].style.display = "block";
}

Another solution is to put each div inside a container, but it is still safer to use classes with preset because the order of the elements can be modified in the element inspecter.