Automatic scroll for showcase
i am trying to make two arrows that automatically scroll in the showcase that is a specific width.
38 Replies
What do you mean?
Sorry i didnt know how to explain it good. When the left button is pressed, i want all the boxes to slide to the right, while the already visible 3 boxes dissapear, 3 hidden will show. Like the netflix scroll
If you make a codepen, it would allow us to work with your code and help you out
I don’t have much knowledge in coding. I also don’t know what a codepen is. I’ll figure it out soon
Codepen is just a way to share your code where we can all help out
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
how do i share it?
https://codepen.io/Aaron-Libenhed/pen/LYXRKZZ
Just like that!
I don't see any arrows though like in your picture
It scrolls on mobile fine
oh sorry, i realised i took them away while testing. yeah it scrolls fine, but i am going to remove the scrollbar and i ant there to be buttons that automatically scrolls for me. i'll just add the arrow, it'll be a minute
there, it should be updated
Well we'll definitely need Javascript
yeah i realised, i personally don't have a clue about js
Haha this is a bigger thing to take on if you know nothing about JS. It may be worth taking the time out to learn JS before trying to do something like this. I'm still working on it but frankly, even when I send it back, you won't really have an idea what's happening.
yeah i should learn it. the school that taught me HTML and CSS don't teach JS, the web coding isn't the main study.
i'm watching this right now tho: https://www.youtube.com/watch?v=b--q6Fsf_cA&ab_channel=KevinPowell
Kevin Powell
YouTube
Can I create Netflix’s video carousel with CSS only?
Sometimes it's fun to try and make something with CSS only. It might not be code you'd use in production, but that doesn't mean we can't learn a lot from doing it!
🎓 I'm working on a new course! https://beyondcss.dev/
🔗 Links
✅ The GitHub repo: https://github.com/kevin-powell/netflix-carousel-css-only
✅ Kyles video: https://www.youtube.com/wa...
Hmm, I'd be curious to see how he does that. I'm sure it's quite interesting.
Either way, here you go
https://codepen.io/croganm/pen/RwqGXpq
thank you so much
You can use an href to scroll with only css. If your arrows are anchor Tags that have the id of what you want to scroll to is the href.
Yea. Now I would really try to review what's different in what I sent and what's different in your original code and see if there's something you can learn from that. Also, feel free to ask questions.
You can do something like that with horizontal scrolling? I'd love to see an example
But will not be as smooth as using js to just translateX with js.
Yea that's fair...
On my way home from work. Will put a codepen here
I mean you could use scroll smoothing
yup i will
There is also a vertical snapp with using href which can be annoying
one thing i've never understood / never gotten explained to me is why you use this:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height
oh so how the body or other things sometimes have padding or margin, that will eliminate thoes?
No
Best way honeslty to understand is to learn about the box model period.
But just like the quote says. Its making w/h calculations including border/padding. By default those are not included in the sizing.
Play around with it you can add it on elements to see
w3schools actually has a good example 😄 https://www.w3schools.com/css/css3_box-sizing.asp
ok thanks
Also next time lets open a new post with the question so we don't derail threads xD
but is the padding still there? like an anchor you might want the press area to be bigger but not to show. because otherwise the padding would just do nothing?
right, sorry
yes. it is a reset.
also you need all three selectors because the "*" selector does not apply to pseudo elements
also you need all three selectors because the "*" selector does not apply to pseudo elements
So does it only work if there are two groups of cards?
Just because it seems like you can either see the last group or the first group, no in between
You can tweak it to your liking. Kevin does a trick with z-index and :target pseudoclass I think.
The takeaway should be how the anchor tags are working with the id that you are scrolling to
You can have multiple anchortag/id relationships.
Well I'm mainly wondering how the two arrows could work if you had multiple anchor tags. You could definitely do a paginated approach
That stuff gets a lot easier to manage with js, but you can get creative with different selectors and pseudo classes.
Kevin nailed it in the video @kashimotoo linked to
https://discord.com/channels/436251713830125568/1121236298246660206/1121521592384630905
This one is unfortunately not from Mr. Powell. But with js
https://youtu.be/yq4BeRtUHbk
Web Dev Simplified
YouTube
Can I Create Netflix’s Video Carousel UI?
Netflix has some incredible UI, but at the core of all its UI features is the video carousel. This is a simple looking piece of UI, but it is incredibly complex. In this video I attempt to recreate this UI component live for the first time.
📚 Materials/References:
GitHub Code: https://github.com/WebDevSimplified/netflix-sliding-movie-ui
🌎 F...