0

Bom dia!
Por exemplo tenho uma página com o conteúdo numa tabela, em uma <td> aparece o texto e na outra <td>a imagem. inserir a descrição da imagem aqui
E ao clicar na seta seguinte deveria mostrar a seguinte tabela com outro conteúdo e com a outra imagem, e a primeira <table> desaparecer!
Eu consegui fazer com as imagens, a imagem desaparece e mostra a seguinte, porém o conteúdo da primeira tabela ainda se mostra visível...
Aqui está o código das tabelas:

<div id="arrow-left" class="arrow"></div>
    <div id="slider">
        <table width="95%" align="center" id="servico1">
            <tr>
                <td width="50%" bgcolor="#f2ebe1" height="90">
                    <div style="padding-left: 20px;">
                        <p>TEXTO</p>
                        <h1>
                            TEXTO
                        </h1>
                        <hr>
                        <ul>
                            <li>A</li>
                            <li>B</li>
                            <li>C</li>
                            <li>D</li>
                            <li>E</li>
                            <li>F</li>
                            <li>G</li>
                            <li>H</li>
                        </ul>
                    </div>
                </td>
               //aqui fica a imagem
                <td width="50%" height="90">
                    <div class="slide slide1">
                        <div class="slide-content">
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <table width="95%" align="center" id="servico2">
            <tr>
                <td width="50%" bgcolor="#f2ebe1" height="90">
                    <div style="padding-left: 20px;">
                        <p>TEXTO</p>
                    </div>
                </td>
                <td width="50%">
                  //Aqui fica a segunda imagem
                    <div class="slide slide2">
                        <div class="slide-content">
                            <span>Imagem dois</span>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    <div id="arrow-right" class="arrow"></div>
 </div>


Função em JS

<script>
    let sliderImages = document.querySelectorAll(".slide"),
    arrowLeft = document.querySelector("#arrow-left"),
    arrowRight = document.querySelector("#arrow-right"),
    current = 0;

    // Limpar todas as imagens
    function reset() {
        for (let i = 0; i < sliderImages.length; i++) {
            sliderImages[i].style.display = "none";
        }
    }

    // Init slider
    function startSlide() {
        reset();
        sliderImages[0].style.display = "block";
    }

    //Mostrar anterior
    function slideLeft() {
        reset();
        sliderImages[current - 1].style.display = "block";
        current--;
    }

    // Mostrar seguinte
    function slideRight() {
        reset();
        sliderImages[current + 1].style.display = "block";
        current++;
    }

    // esquerda seta click
    arrowLeft.addEventListener("click", function() {
        if (current === 0) {
            current = sliderImages.length;
        }
        slideLeft();
    });

    // direita seta click
    arrowRight.addEventListener("click", function() {
        if (current === sliderImages.length - 1) {
            current = -1;
        }
        slideRight();
    });

    startSlide();

</script>


Obrigada a quem poder ajudar!

4
  • Se você quer mudar a exibição da tabela (esconde uma e mostra outra), a classe slider deve estar na table, e não na div dentro da table. 3/07/2018 às 11:12
  • 1
    veja esse exemplo se resolve: jsfiddle.net/nsd9uwh6/8 como não tinha imagens das setas, coloquei nas divs o "esquerda" e "direita" para poder identificar e clicar 3/07/2018 às 11:12
  • Oh.. Funcionou perfeitamente, foi falta de atenção, obrigada!! Não quer postar a resposta para marcar como correta?
    – Ana
    3/07/2018 às 11:24
  • 1
    coloquei na resposta, obrigado :) 3/07/2018 às 11:29

1 Resposta 1

1

Como precisa muda a exibição da tabela e está usando a classe "slider", precisa mudar a classe da div:

<div class="slide slide1">

Para a tabela:

<table class="slide"..>

Aqui um exemplo no jsfiddle: http://jsfiddle.net/nsd9uwh6/8/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .