I need to write a code that flips blocks, there were almost no problems with the code itself, but there was a problem with its wedging, here is the code itself:

const blocks = document.querySelectorAll('.block');
let currentIndex = 0;

function showBlock(index) {
  blocks.forEach((block, i) => {
    if (i === index) {
      block.classList.add('visible');
    } else {
      block.classList.remove('visible');
    }
  });
}

const rightButton = document.getElementById('rightButton');
rightButton.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % blocks.length;
  showBlock(currentIndex);
});

const leftButton = document.getElementById('leftButton');
leftButton.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + blocks.length) % blocks.length;
  showBlock(currentIndex);
});

showBlock(currentIndex);

Here is my html structure:

<section id="information">
    <div class="information">
        <div class="container">
            <div class="information__block__mod">
                <!--p>1</p-->
                <div class="block visible" id="block1">
                    <div class="title_antivirus">
                        <div class="title__block">
                            <span class="texttitleblock">Kaspersky Lab </span>
                        </div>
                    </div>
                    <div class="content__base">
                        <div class="img__content">
                            <img src="../project/img/img/rect.png" alt="" class="img__1">
                            <img src="../project/img/img/rect.png" alt="" class="img__2">
                            <img src="../project/img/img/rect.png" alt="" class="img__3">
                        </div>
                        <div class="text__block">
                            <div class="text__information">
                                <span class="text">
                                    <p>A</p>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="buttonlinkcyte">
                        <button class="link__cyte"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="footer">
            <footer class="footer">
                <div class="container">
                    <div class="footer__row">
                        <button class="link__wk">
                            <img src="../project/img/Footer_button/wk.svg" alt="">
                        </button>
                        <button class="link__tg">
                            <img src="../project/img/Footer_button/telegramm.svg" alt="">
                        </button>
                        <button class="link__tg_bot">
                            <img src="../project/img/Footer_button/msg_bot.svg" alt="">
                        </button>
                        <button class="link__git">
                            <img src="../project/img/Footer_button/GitHub.svg" alt="">
                        </button>
                    </div>
                </div>
            </footer>
        </div>
</section>
</body>
<script>
    <!--Here my js-->
</script>

I was faced with the problem that I had nowhere to store blocks that the user should not see, I decided to look for a solution and came up with the idea that I could place them outside the site border where the user would not see them, but when I did this they did not disappear at all, but rather continued below.
I try in css righting:

overflow: hidden;

But, after that, everything worked on the test site, all the blocks disappeared, that’s only when I messed up the code in the main project, not only did it start to be displayed ignoring this property, but also Js stopped working. And I don’t understand at all why everything is the same, only the file is different
How can this be fixed?