We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
Hey there, I'm back again with bad issues.
I've tried out the "rolling" example in a completely separate app. Worked great. But here I am trying to put it into another, existing app.
The cards are not centered, and upon drag, the whole carousel-track starts moving slightly left or right.
Video of the issue: https://user-images.githubusercontent.com/51885228/188541506-a9e2ecd0-5a53-4d30-b59e-00051cb58d87.mov
The code:
const cardSize = 100; const cardPadCount = 3; const carouselWidth = clamp(window.innerWidth, 0, 960); . . . . function CarouselContainer (props) { const { cursor, carouselState, ...rest } = props // Put current card at center const translateX = (cursor - cardPadCount) * cardSize + (carouselWidth - cardSize) / 2 return ( <NonPassiveTouchTarget className='carousel-container'> <NonPassiveTouchTarget className='carousel-track' style={{ transform: `translate3d(${translateX}px, 0, 0)`, }} {...rest} /> </NonPassiveTouchTarget> ) }
The styles:
.top-level-container { position: fixed; top: 0; left: 0; right: 0; height: 100vh; overflow-x: hidden; width: 100vw; margin-top: 0; margin-left: 0; z-index: 99; } .carousel-container { height: 300px; width: 100%; margin: 0 auto; overflow: hidden; touch-action: pan-y; } .carousel-track { display: flex; height: 100%; } .carousel-card { flex: 0 0 100px; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; font-weight: bold; color: white; -webkit-tap-highlight-color: transparent; } .image-container { max-width: 8em; max-height: 8em; width: 4em; height: 4em; background-size: cover; } .carousel-card-inner { position: relative; display: flex; justify-content: center; flex-direction: column; align-items: center; width: 100px; height: 180px; color: rgba(0,0,0,.5); transition: inherit; -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3); */ border: 5px solid black; border-radius: 1.5em; }
Any thoughts on what's going wrong?
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Hey there, I'm back again with bad issues.
I've tried out the "rolling" example in a completely separate app. Worked great.
But here I am trying to put it into another, existing app.
The Problem
The cards are not centered, and upon drag, the whole carousel-track starts moving slightly left or right.
Video of the issue:
https://user-images.githubusercontent.com/51885228/188541506-a9e2ecd0-5a53-4d30-b59e-00051cb58d87.mov
The code:
The styles:
Any thoughts on what's going wrong?
The text was updated successfully, but these errors were encountered: