making a gallery that scrolls from left to right but the first element in the scroll starts with a margin-left auto so that its centered

Question

making a gallery that scrolls from left to right but the first element in the scroll starts with a margin-left auto so that its centered

40 views Asked by Manuel Latour At 10 January 2024 at 15:20

im trying to do a small project and am wondering

I right now have this page like this: https://meowrhino.github.io/profilePics/

and would like the gallery to have a scroll that works like the one in the image

which is with a width-wide gallery, but would like it so the scroll does not start/ends when the first element enters in the scroll but that the scroll has margin inside of it, so that the first image appears in the center of the page (like in a picture gallery) and the last one does the same (i don't know if theres a margin option in the overflow or something I could add to the first and last one divs)

here's the code i have rn:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>profile pics</title>
    <style>
        body {
            text-align: center;
            font-family: sans-serif;

            display: flex;
            flex-direction: column;
            justify-content: center;
            
            margin: 0;
        }

        .gallery {
            display: inline-block;
            white-space: nowrap;
            gap: 50px;
            overflow: scroll;
        }

        .profilePic {
            width: 512px;
            height: 512px;
        }

        .text {
            max-width: 820px;
            margin-left: auto;
            margin-right: auto;
        }

    </style>
</head>

<body>

    <div class="text">
        <h1>
        my gallery
        </h1>
        <h3>
            I love to upload images that I find relatable to my Telegram profile, and from time to time I indulge in scrolling through them and find patterns, today I found out that the first one was lost due to the 100 max photos limit (Telegram just did it automatically) so I wanted to create an archive to save them forever and be able to store more than just a hundred of them
        </h3>
    </div>

    <div class="gallery">
    </div>

    <script>
        const cantidadDeFotos = 100;
        const gallery = document.querySelector(".gallery")

        for (i = cantidadDeFotos; i > 0; i--) {
            let image = document.createElement("img");
            image.src = `img/${i}.PNG`
            image.classList.add("profilePic")
            gallery.appendChild(image);
        }
    </script>
</body>

</html>

Original Q&A

There are 1 answers

**Manuel Latour** · Answer 1 · 2024-01-11T09:33:38+00:00

Solved it! I added a function that calculates the margin I need and creates an empty div with that amount as margin.

Would be nice if imgWidth and imgGap was obtained via JS but that will be next level I guess.

    <script>
    const cantidadDeFotos = 100;
    const gallery = document.querySelector(".gallery");

    const screenWidth = document.documentElement.scrollWidth;
    const imgWidth = 512;
    const imgGap = 50;

    function addScrollMargin() {
        let marginToAdd = screenWidth / 2 - imgWidth / 2 - imgGap;

        let margin = document.createElement("div");
        margin.classList.add("galleryMargin");
        margin.style.margin = `${marginToAdd/2}px`;

        gallery.appendChild(margin);

        console.log(margin);
    }

    addScrollMargin();

    for (i = cantidadDeFotos; i > 0; i--) {
        let image = document.createElement("img");
        image.src = `img/${i}.PNG`;
        image.classList.add("profilePic");
        gallery.appendChild(image);
    }

    addScrollMargin();

TechQA.

making a gallery that scrolls from left to right but the first element in the scroll starts with a margin-left auto so that its centered

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in OVERFLOW

Related Questions in MARGIN

Related Questions in CENTER

Popular Questions

Popular Tags

Trending Questions