mxmzb/react-marquee-slider

children still given random position with scatterRandomly=false

Opened this issue · 1 comments

Perhaps I'm misunderstanding the prop or the goals of this library, but I'm looking to add marquee scroll to a horizontal list of items.

          <Marquee
            velocity={30}
            minScale={1}
            maxScale={1}
            scatterRandomly={false}
          >
            {customSortedIDPs(providers).map((provider) => (
              <div key={provider.value} className={styles.providerContainer}>
                <img
                  src={provider.iconUrl}
                  className={styles.providerLogo}
                  alt={provider.label}
                />
              </div>
            ))}
          </Marquee>

But, based on these few lines, it seems like the y positioning is still randomized?

          setChildrenPosition((state) => [
            ...state,
            {
              x: randomIntFromInterval(0, containerSize.width),
              y: randomIntFromInterval(0, containerSize.height),
            },
          ]);

https://github.com/mxmzb/react-marquee-slider/blob/master/src/Marquee.tsx#L140-L146

The result is that a couple of my child elements are at random y positions, while I want them to all be aligned as they are without the Marquee.

before:

Screen Shot 2021-03-03 at 10 42 45 AM

with marquee

Screen Shot 2021-03-03 at 10 43 00 AM

Am I misunderstanding something here?

I've got this on a deploy preview here -https://603fb29b59591d0008953720--osso.netlify.app/

Interestingly the other place I use this further down the page doesnt have the same issue, so perhaps this is an error in userland, but i cant track it down.

I was able to solve this by targeting the created divs with css and using flex. super unclear 🤷‍♂️

.parent > div > div {
  display: flex;
  justify-content: space-evenly;
}