Change the text according to the slide image

Question

Change the text according to the slide image

Navigation

#1 by (0 votes)

1

Hello,

I'm messing around with HTML / CSS, I've been making a slide and I've had a doubt, probably from JavaScript.

I made a mini slide of featured products, and on the side of this slide, has the text referring to the product. Is there any way to handle the slide, so that when the person 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>

Thank you in advance.

javascript html jquery css slide

asked by anonymous 02.08.2016 / 14:29

1 answer

.htaccess wildcard subdomain pointing to directory + hash How to retrieve html text from the database?

score 0 · Accepted Answer

You meant "content", not "text", right? The best way to do this is to create 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 prefixed name and the number of the image to which div belongs.

Let's suppose that every div will have the class image-[número] and 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 pick up the div with the image-[slideIndex] class and set the display: block; style property.

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 every div inside a container, but it is still safer to use classes with a prefix because the order of the elements can be modified in the element inspector.