how do I make an infinite horizontal scroll
How do I make an infinite horizontal image scroll
20 Replies
can you share an example of what you want, or share what you have tried in a https://codepen.io
Like is it looping through or loading more? cause both are very different things 😄
Neither it’s not even working. I was following Kevin’s YouTube video but it’s not working.
They seem to be breaking down
best way to get help is to share a demo/code.
If you're following a video, it's doubly important to share your code. You'll have made a mistake somewhere, but we can't tell you where without you sharing your code, broken or not.
right now, this would be a valid answer to your question but this is probably the video you're following, so that's not particularly helpful https://www.youtube.com/watch?v=3yfswsnD2sw
Kevin Powell
YouTube
Create a horizontal media scroller with CSS
Horizontal scrolling components are becoming more and more common, so let's look at the CSS behind them!
💻 The starting code: https://codepen.io/kevinpowell/pen/NWwNvEG
💻 The finished version: https://codepen.io/kevinpowell/pen/ExbKBQa
🔗 Links
✅ Replay with Adam Argyle that I mentioned: https://www.twitch.tv/videos/1277849387
✅ Adam's GUI c...
or maybe this one? https://www.youtube.com/watch?v=iLmBy-HKIAw
Kevin Powell
YouTube
Create an infinite horizontal scroll animation
🎓 Did you know I have courses? Both free and premium ones: https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=infinitescroll
Infinite scroll animations for things like logos are relatively common these days, but there is a lot that we can do incorrectly when making one, so I decided to try and make one that respec...
I'm following this one
Hello?????
first issue I see in your document is this. (I didn't dive into it more)
If this does not solve the issue, please make a codepen with ONLY the relevant part (not the whole page). That way it's easier for us to figure out what is going on.
OK let me try it out. Thank you so much.
Yeah, it doesn’t solve the issue
make a codepen so we can see your working code (only the relevant part)
OK, thank you so much I really really appreciate the help
you are missing the js part which doubles the pictures
here is kevin's codepen, so you can compare
https://codepen.io/kevinpowell/pen/LYMXPaJ?editors=1010
it's working on codepen, but it's not working on my visual studio
this is so frustrating
do you have the JS? If you have linked it in the <head>, make sure you add the 'defer' keyword
<script src="blabla.js" defer></script>
Elsewise, check your console if there are errorsOh my God, are you serious? I’m an idiot. Thank you so much.
It’s working, but it’s very narrow in the bottom