There’s nothing I enjoy more than visiting a website and immediately recognizing the experience a component provides from a distance.

One of my favorite components is the carousel format. It’s so satisfying to know that beyond the screen, there’s more content waiting to be shown. I’ll admit, those traditional arrows sometimes annoy me a bit—they’re there to indicate something that should already feel intuitive.

When I’m driving and see that I can turn left or right, I don’t need a sign telling me what’s obvious; the flow and navigation of the road already provide that experience, making it clear what I can do.

And once again, Voxel steps in with a “boom” (sound of something hitting perfectly). I initially thought I’d have to dive into the code, tweaking things here and there to improve this experience. But as usual, I didn’t need to stress or ask ChatGPT to help write a few lines of code to improvise the functionality. You know why? Because it feels like they’ve already thought of everything. And if they haven’t, they’ve made everything so intuitive—or maybe they really are aliens.

It’s incredible to see how every Voxel feature is built with pixel-perfect precision, giving you control over almost every detail.

It didn’t take long before I reached a satisfying result.

Step 1: Editing in the mobile version, using the post carousel you can insert the following configurations:

Item gap: 24
Scroll padding: 24
Item padding: 0

You can use the spacing you prefer. I like to use multiples of 8, following the ‘8-point grid’ rule in design to maintain consistency in my design system.

Step 2: For the main container, you can set the left and right padding to 0 to align it with the borders.

Step 3: In the internal container, to control the spacing on the sides of the text so that it doesn’t stick to the edges, set the left and right padding to 24. This ensures that only the carousel remains aligned with the edges.

Step 4: To make the appearance even more dynamic, you can add a custom class to your post carousel. In my case, I used ‘custom-carousel.

I added the following CSS code to remove the arrows from the carousel only for this widget and only on devices with a maximum width of 520px, as I want this effect to apply only on mobile.

@media (max-width: 520px) {
.custom-carousel .post-feed-nav{display: none;}
}

To complement this, I added a CSS masking effect that creates a transition effect for the first 5% and the last 5% of the screen, as shown in the images above.

.custom-carousel{
mask-image: linear-gradient(90deg, rgba(22, 22, 22, 1) 0%, rgba(22, 22, 22, 1) 5%, rgba(22, 22, 22, 1) 95%, rgba(22, 22, 22, 0) 100%) !important;
-webkit-mask-image: linear-gradient(90deg, rgba(22, 22, 22, 1) 0%, rgba(22, 22, 22, 1) 5%, rgba(22, 22, 22, 1) 95%, rgba(22, 22, 22, 0) 100%!important;
}