Add marquee to website carousel component

[vipulgupta2048]

Added react-marquee component to the Carousel

What has been done:

• Add marquee to Alumni Section
• Fix Volunteer Section CSS

How it looks:

What's fixed: #319

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 3, 2024 10:23pm

[Vyogami]

Fixes:

• [Feature] add auto-scroll(marquee) on Volunteers and Alumni section #319

[Vyogami]

@rohan09-raj can you please review these changes?

[rohan09-raj]

Looks good to me, one question that does it handle scroll on user interaction to carousel ??

[Maniktherana]

i dont think marquees let you scroll
it does it automatically

[Maniktherana]

mb i fat fingered the close button

[vipulgupta2048]

I think when I tried it - it was scrolling?

[Maniktherana]

I think when I tried it - it was scrolling?

I mean you don't manually have to scroll it
It does it automatically

[rohan09-raj]

I think when I tried it - it was scrolling?

I mean you don't manually have to scroll it
It does it automatically

Shouldn't we allow the manual scrolling as well ?

[vipulgupta2048]

The React component has multiple issues open on users requesting draggable marquee or scrolling horizontal support: https://github.com/justin-chu/react-fast-marquee/issues?q=is%3Aissue+is%3Aopen+scroll
No feature to enable that yet

[Maniktherana]

It would be better to have carousels that autoscroll

[vipulgupta2048]

IMO, the improvement was to add an auto-scroll marquee component, which this PR added successfully.
Wouldn't this conversation be better for another issue to now make it scrollable too and at least get this functional change merged?

[Maniktherana]

should have this fixed before merge

[Maniktherana]

suggestions:

• In EventItem.module.css > .event class, add the line: min-width: 27.6rem;
• Whereever we have a <Carousel> component, update props such that:

-+props={data.map((item) => {
+props={data.map((item, idx) => {
          return (
            <VolunteerItem
-             key={item.id}
+             key={idx}

there's a key error in one of them (maybe repeated id field in data sources)

[Maniktherana]

oh wait now that I'm seeing the original issue:

Add auto-scroll(marquee) on Volunteers and Alumni section to give fair visibility on every individual.

@Vyogami should the events section be a marquee or should it just remain a carousel?

[Vyogami]

oh wait now that I'm seeing the original issue:

Add auto-scroll(marquee) on Volunteers and Alumni section to give fair visibility on every individual.

@Vyogami should the events section be a marquee or should it just remain a carousel?

I suppose a carousel would make more sense!

[Vyogami]

In addition to #323, the speed of marquee can be adjusted as atm the animation looks jittery it can be ease out to look more natural.

[vipulgupta2048]

Feel free to modify or tweak the changes if you want to, I might have some time next week to resolve these things. Changing the speed and removing events carasoul would be straightforward changes.