The CardsMarquee component is a dynamic, interactive marquee slider for showcasing profiles or items with hover effects and smooth animations. This guide will help you:
Edit or add items (names, titles, tags, images, and links).
Customize animations (speed, easing, and hover behavior).
Adjust layout and appearance (card styles, dimensions, and gaps).
Ensure accessibility and responsiveness.
Project Resources
Tutorial
Step 1: Editing the items
Array
Locate the items
Array
The items
array contains all the data for the cards displayed in the marquee:
Edit Existing Items
name
: The name displayed at the top of the card.title
: The title or role shown below the name.tags
: Tags or skills listed at the bottom of the card.imageSrc
: The URL of the image displayed in the card.alt
: Descriptive text for the image (important for accessibility and SEO).href
: The link where the card directs users upon clicking.
Example Update:
Add New Items
Add new objects to the items
array to include more cards.
Example:
Remove Items
Remove unwanted objects from the array.
Step 2: Customizing Animations
Default Marquee Speed
The marquee animation speed is defined in the handleMouseEnter
and handleMouseLeave
functions:
Increase Speed: Reduce
duration
.Decrease Speed: Increase
duration
.
Example Update:
Hover Behavior
When hovered, the animation speed changes via handleMouseEnter
and handleMouseLeave
:
Hover Speed:
Default Speed:
Adjust the speeds as needed for your project.
Step 3: Adjusting Layout and Appearance
Card Dimensions
The card size is controlled by the MarqueeItem
component:
Change Card Width:
Change Card Height:
Gap Between Cards
The gap between cards is set in the marquee container:
Increase/Decrease Gap:
Card Styling
The card styling includes hover effects and transitions:
Change Hover Scale:
Adjust Transition Speed:
Step 4: Accessibility Enhancements
Alt Text for Images
Ensure every
alt
property in theitems
array has meaningful text for screen readers and SEO.
Focus and Keyboard Navigation
Add
aria-label
to the card container for screen reader support:
Step 5: Testing and Optimization
Run Locally: Use
npm run dev
to preview changes.Test Responsiveness: Verify the component looks good on mobile, tablet, and desktop.
Performance Check: Optimize images to reduce load time using
.webp
or a CDN.