Show and hide table in JavaScript with arrows

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. HomeAndwhenIclickonthenextarrowIshouldshowthenexttablewithanothercontentandtheotherimage,andthefirst<table>disappear!
Iwasabletodowiththeimages,theimagedisappearsandshowsbutthecontentsofthefirsttablearestillvisible...HomeHereisthecodeforthetables:

<divid="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>

Thank you to anyone who can help!