Infinite scrolling carousel problem
Can someone help with my infinite carousel slider?
https://github.com/GeorgeDash/chronotask
It's jumping after the animation is finished and I tried many ways (including asking AI), but it still doesn't work.
Link to the live version: https://chronotask.vercel.app/
GitHub
GitHub - GeorgeDash/chronotask
Contribute to GeorgeDash/chronotask development by creating an account on GitHub.
13 Replies
is this code made by ai?
The final version - yes, but before that I tried.
that's why the javascript makes no sense
What should I fix there? And perhaps - is there a CSS-only solution?
im surprised that any browser doesn't crash after 2 seconds
LOL, wdym?
oh, wait, it shouldn't crash, i misread it
it's still not a good idea, as it is just stretching everything and making it 2x wider
Yeah, I want to remove that, but I don't know how to make it work.
And I'll ask again - is there a CSS-only solution you possibly know?
no, you need js
the easiest way is to:
- use a css animation to translate the element
- detect the end of the animation
- move the first element to the end and reset the animation in js
OK, I'll try something.
Thanks for the help!
😊
also, dont make ai write your code
more often than not, it's just sloppy slop
you should only clone the elements if there aren't enough to fill the space
and only clone until the element is overflowing
and if you clone, just do a deep clone, not a shallow clone of the elements
it's a waste of time
Hey, i know you have already marked this as solved, but i would like to link this YT video of a css only carousel. I am a newbie and found this helpful.
https://youtu.be/Reu0hHbis5w?feature=shared
Slaying The Dragon
YouTube
You Don't Need JavaScript For This - CSS ONLY Infinite Scroll
🚨🚨🚨 COURSES - https://slayingthedragon.io 🚨🚨🚨
Join the discord - https://discord.gg/Ccz9nQSfQB
Finished result - https://codepen.io/ramzibach-the-styleful/pen/LYoYejb
Two rows result - https://codepen.io/ramzibach-the-styleful/pen/ZENExza
Inspiration - https://www.smashingmagazine.com/2024/04/infinite-scrolling-logos-html-css/
Examples from b...
if you follow this, which seems to work well, don't do the
* { margin: 0; }
i don't know why people do that