Show and hide <table> in Javascript with arrows

Question

Good morning!
For example I have a page with the content in a table, in a <td> the text appears and in the other <td>the image.
And by clicking the next arrow you should show the following table with other content and with the other image, and the first <table> disappear!
I managed to do with the images, the image disappears and shows the following, but the contents of the first table is still visible...
Here is the code of the tables:

<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>

Function in 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>

Thanks to those who can help!

Answer 1

Since you need to change the table view and are using the "slider" class, you need to change the div class:

<div class="slide slide1">

For the table:

<table class="slide"..>

Here’s an example in jsfiddle: http://jsfiddle.net/nsd9uwh6/8/