CSS Full-Bleed Scroll-Snapping Carousel with Centered Content and Visible Overflow

~

To jump right in, let’s take a look at the final result:

The first carousel shown is a regular/typical one: all slide-wrappers (.slidewrapper) are as big as the carousel (.slider) itself. They slide-wrappers are laid out on one row using CSS Flexbox. Because they have the same size, the carousel will only show one slide after having scroll-snapped.

The second carousel is the variation I mentioned in the intro: it also visually aligns the focussed slide with the center column — just like the first carousel — but the carousel itself does span the entire width of the page. This leaves the non-centered slides of the carousel also visible, making it look like they’re overflowing outside of the center column.

~

The code for this 2nd type of carousel uses the same markup and CSS as the 1st one, but with some CSS additions. As it’s not as easy as simply adding overflow: visible; to the .slider — as that would remove the scroll container — I adjusted the CSS as follows:

1. The carousel-wrapper (.slider) spans the entire width of the page by means of the .full-bleed utility class.

   .full-bleed {
     width: 100vw;
     margin-left: 50%;
     transform: translateX(-50%);
   }

2. There’s a gap between each .slidewrapper. This is done using margin-right instead of gap, as older browsers don’t support the property in combination with Flexbox.

   .slider.full-bleed .slidewrapper {	
     margin-right: var(--slider-fullbleed-gap);
   }

And now, the key part:

3. The first .slidewrapper is given a padding on its left edge so that it appears centered on load. The last .slidewrapper is given a padding on its right edge so that it appears centered watching the last item.

   .slider.full-bleed .slidewrapper:first-child {
     margin-left: 0;
     padding-left: calc(50vw - (var(--slider-size) / 2));
   }
   
   .slider.full-bleed .slidewrapper:last-child {
     margin-right: 0;
     padding-right: calc(50vw - (var(--slider-size) / 2));
   }

   To make this work, the .slidewrapper elements need box-sizing: content-box; to be applied.

~

To grasp this padding-trick better and to see what’s going on, I’ve added a “Show Debug Outlines” option in the CodePen embed above. Take a close look at the green boxes that wrap the first and last slide contents.

I like the fact that I was able to re-use the same markup for both variations, with their only difference being the .full-bleed class. Nice and DRY 🙂

~