-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Basic carousel for new site #42
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good work! Dropped a few initial thoughts here for you.
src/app/components/Carousel.tsx
Outdated
setFinalOffset(finalOffset + dragOffset); // Keep track of cumulative offset | ||
setIsDragging(false); | ||
setDragOffset(0); // Reset drag offset after drag ends | ||
// setFinalOffset(0); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we delete this line? Was this just for testing?
src/app/globals.css
Outdated
} | ||
|
||
.carousel-item { | ||
min-width: calc(100% / 7); /* Adjust based on number of visible items */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this number intended to match itemsPerView
?
.sliderContainer { | ||
h3 { | ||
font-size: 36px; | ||
margin: 10px; | ||
padding: 2% 0; | ||
background: var(--ifm-color-primary); | ||
color: #fff; | ||
line-height: 100px; | ||
text-align: center; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we still need these styles? Looks like maybe not.
src/app/page.tsx
Outdated
used DIBBs to solve their toughest data challenges | ||
</p> | ||
<> | ||
<ContentContainer align classes="px-14 pt-20 pb-10"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please double check that your styling still works here once you merge #41 in 😃
src/app/layout.tsx
Outdated
import 'slick-carousel/slick/slick.css'; | ||
import 'slick-carousel/slick/slick-theme.css'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We could move these two imports into Carousel.tsx
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good work & thanks for the changes!
Adds a basic carousel for the bottom of the homepage.
Also adds buttons for tabbing and keyboard control.