How to do horizontal scroll navigation of columns of text?

I’m a bit new to the game. I’m really stuck and I would love some guidance if you have like 5 minutes.
I think the screenshot are clear enough to see what i’m talking about, but I would like to do some sort of navigation by sliding and snapping three layers of texts on mobile ( from md screen and beyond, it is the regular “on top of each other” layout) horizontally.
I work with laravel 10 + filamentphp v3 + tailwindCSS (with its default config theme from the doc).

Here is the view without interaction in its default state where #surface is in its active state ; the other two, #shallow and #deep are in their inactive state.

<div class="flex justify-center items-center mb-8 min-h-96">
            <h1 class="text-4xl font-sans font-bold text-amber-500 w-full m-8">{{ $fiche->titre }}</h1>
        </div>


        <div id="section" class="flex flex-row md:flex-col h-full truncate mt-auto max-md:flex-grow ">
            @if ($fiche->text_surface)
                <div id="surface" class="md:w-full text-wrap w-full min-w-2 w-0.5">
                    <div class="p-4 bg-blue-100 w-full h-full md:columns-2  pb-8">
                        <p class="mx-8 max-md:hidden">{{ $fiche->text_surface }}</p>
                    </div>
                </div>
            @endif

            <div id="shallow" class=" md:w-full text-wrap">
                @if ($fiche->text_shallow)
                        <div class="p-4 bg-blue-200 w-full h-full md:columns-2  pb-8">
                            <p class=" mx-8 mb-8 ">{{ $fiche->text_shallow }}</p>
                        </div>
                @else
                    <div class="p-4 bg-blue-200 w-full h-full"></div>
                @endif
            </div>

            <div id="deep" class="min-w-2 w-0.5   md:w-full h-auto text-wrap">
                @if ($fiche->text_deep)
                        <div class="p-4 bg-blue-300 w-full h-full md:columns-2  pb-8">
                            <p class="max-md:hidden mx-8 mb-8">{{ $fiche->text_deep }}</p>
                        </div>
                @else
                    <div class="p-4 bg-blue-300 w-full h-full"></div>
                @endif
            </div>
        </div>

        <div class=" p-1 bg-blue-500 "></div>
        <div class="p-0.5 bg-amber-400 "></div>

1st, the default layer visible

2nd, How it should be after a slide from right to left, notice that there are another layer to the right

Have you an idea of how to do this ? Is there a (lightweight) JS library or copy/pastable element of some sort to do this?
If not, can you at least tell me how this kind of “navigation” is called so It can ease my further research?

I tried the scroll and snap feature of native tailwind and it works kinda well, but it eliminates the bars on the sides (which are important for my design) and there is a small horizontal scroll bar on the bottom that I don’t want…
After, I tried some javacript and manipulating DOM to switch classes wherever its needs, but it somehow breaks a lot of things like texts not reappearing or suddenly having like 3 kilometers of vertical and horizontal scroll…

Thanks a lot.