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.
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!
slider
deve estar natable
, e não nadiv
dentro da table.