Automatic scroll for showcase

i am trying to make two arrows that automatically scroll in the showcase that is a specific width.
38 Replies
croganm
croganm17mo ago
What do you mean?
Kashimoto
Kashimoto17mo ago
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
croganm
croganm17mo ago
If you make a codepen, it would allow us to work with your code and help you out
Kashimoto
Kashimoto17mo ago
I don’t have much knowledge in coding. I also don’t know what a codepen is. I’ll figure it out soon
croganm
croganm17mo ago
Codepen is just a way to share your code where we can all help out
croganm
croganm17mo ago
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.
croganm
croganm17mo ago
Just like that! I don't see any arrows though like in your picture It scrolls on mobile fine
Kashimoto
Kashimoto17mo ago
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
croganm
croganm17mo ago
Well we'll definitely need Javascript
Kashimoto
Kashimoto17mo ago
yeah i realised, i personally don't have a clue about js
croganm
croganm17mo ago
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.
Kashimoto
Kashimoto17mo ago
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...
croganm
croganm17mo ago
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
Kashimoto
Kashimoto17mo ago
thank you so much
skinnyK
skinnyK17mo ago
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.
croganm
croganm17mo ago
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
skinnyK
skinnyK17mo ago
But will not be as smooth as using js to just translateX with js.
croganm
croganm17mo ago
Yea that's fair...
skinnyK
skinnyK17mo ago
On my way home from work. Will put a codepen here
croganm
croganm17mo ago
I mean you could use scroll smoothing
Kashimoto
Kashimoto17mo ago
yup i will
skinnyK
skinnyK17mo ago
There is also a vertical snapp with using href which can be annoying
Kashimoto
Kashimoto17mo ago
one thing i've never understood / never gotten explained to me is why you use this:
*,
*::before,
*::after {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
b1mind
b1mind17mo ago
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
Kashimoto
Kashimoto17mo ago
oh so how the body or other things sometimes have padding or margin, that will eliminate thoes?
b1mind
b1mind17mo ago
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
Kashimoto
Kashimoto17mo ago
ok thanks
b1mind
b1mind17mo ago
Also next time lets open a new post with the question so we don't derail threads xD
Kashimoto
Kashimoto17mo ago
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
skinnyK
skinnyK17mo ago
skinnyK
skinnyK17mo ago
yes. it is a reset.
also you need all three selectors
*, *::before, *::after {}
*, *::before, *::after {}
because the "*" selector does not apply to pseudo elements
croganm
croganm17mo ago
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
skinnyK
skinnyK17mo ago
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.
croganm
croganm17mo ago
Well I'm mainly wondering how the two arrows could work if you had multiple anchor tags. You could definitely do a paginated approach
skinnyK
skinnyK17mo ago
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
skinnyK
skinnyK17mo ago
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...
Want results from more Discord servers?
Add your server