I'm working on a portfolio project for my final class assignment, and I want to incorporate a horizontal carousel to showcase my projects. The idea is to have each project represented as a card that viewers can scroll through and click on for more details. I've come across several methods to accomplish this using only HTML and CSS, but I'm seeking advice on the best approach. Additionally, I'm interested in options that provide broader browser support, so methods relying on webkit properties aren't my preference. I'm open to any suggestions you might have; even if they aren't applicable to this project, they could be useful in the future!
2 Answers
If you're sticking with plain CSS, here's a potential setup: create a series of boxes positioned horizontally (you can use various CSS techniques for that). Wrap these boxes in a parent container set to `overflow: hidden`, and animate another wrapper that translates according to your box widths. However, this method lacks interactivity. For instance, while you can pause the scrolling on hover, it doesn't allow for next/previous buttons without some hacks that may not be very accessible. Ultimately, incorporating JavaScript could simplify things by toggling visibility for each box, though I know that might seem daunting at first.
A solid way to set up your carousel is by using Flexbox to lay everything out horizontally. You can integrate CSS Scroll Snap to create a smooth 'swipe' effect for your cards. A neat trick I learned is to apply a slight shadow at the edges of the carousel, hinting to users that more content is available to scroll through. Also, make sure to set the cards to a percentage width so that at least one card will always be partially visible, indicating that there's more to see. It really depends on your design goals, but this method has worked great for me!
Using Scroll Snap is a clever idea! I haven't utilized it too much but thinking about trying it now.
In my experience, the focus issue isn't too troublesome. When tabbing, the focused card just slides into view easily. I might've used scroll-behavior or scroll-snap to smooth out the transitions, but it's been a while.