CSS first

[domaine-stijn-slats]

I recently switched to Embla Carousel. One if the biggest reasons is that it is CSS first. It also comes with a smaller bundles size, which I didn't compare yet with the latest Swiper V14.

What about SwiperJS? Any chance Swiper becomes CSS first in the future as well? There are still things from Swiper JS that works way better then with Embla. E.g. wheelgesture etc.

[Poliklot]

@domaine-stijn-slats 👋

We use a CSS-driven layout with Swiper in our projects: slidesPerView: 'auto', CSS custom properties for the number of visible slides and spacing, and media queries for responsive changes.

Here's a simplified example using standard Swiper markup with an additional cards class on the .swiper container (styles written in SCSS):

import Swiper from 'swiper';
import 'swiper/css';

new Swiper('.cards', {
  slidesPerView: 'auto',
  spaceBetween: 0, // Spacing is defined in CSS below
  loop: false,
});

.cards {
	--slides-count: 2;
	--gap: 8px;

	@media (min-width: 577px) {
		--slides-count: 3;
		--gap: 16px;
	}

	@media (min-width: 992px) {
		--slides-count: 6;
	}

	.swiper-slide {
		width: calc((100% - var(--gap) * (var(--slides-count) - 1)) / var(--slides-count));
		box-sizing: border-box;

		&:not(:last-child) {
			margin-right: var(--gap);
		}
	}
}

The responsive layout is defined entirely in CSS, without duplicating these breakpoints in the Swiper configuration. The slide widths and spacing are also present before initialization.

One important detail: this example uses CSS margins on slides, not gap on the wrapper, and keeps spaceBetween at zero.

This works with Swiper 11.2.10 for a horizontal, LTR, non-looping slider. It doesn't make Swiper fully CSS-first, but it covers this layout workflow without cssMode.

Is this the kind of CSS-first workflow you're looking for, or are there other aspects of Embla's approach you're missing?

[domaine-stijn-slats]

Thanks for the detailed and quite nice approach. I think that when Swiper would go CSS-first, it can drop a lot of JS that normally is needed and shipped in the core. So besides CSS-first, Embla is also 50% of the size of Swiper.