Carrusel creado solo con CSS, navegación con botones

Este es uno de los ejemplos que mostré durante la presentación que hice en la WordCamp Logroño 2025.

El resultado final

El código

add_action( 'init', 'cg_carousel_button_navigation_style' );
function cg_carousel_button_navigation_style() {
	register_block_style( 'core/gallery', array(
		'name'         => 'osom-carousel-button-navigation',
		'label'        => __( 'Carousel with Buttons', 'osom-block-styles' ),
		'inline_style' => '
		.wp-block-gallery.is-style-osom-carousel-button-navigation {
			flex-wrap: nowrap !important;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			overscroll-behavior-x: contain;
			-ms-overflow-style: none;
			anchor-name: --carousel;
		}

		@media (prefers-reduced-motion: no-preference) {
			.wp-block-gallery.is-style-osom-carousel-button-navigation {
				scroll-behavior: smooth;
			}
		}

		.wp-block-gallery.is-style-osom-carousel-button-navigation figure {
			scroll-snap-align: center;
			flex: 0 0 auto;
		}

		@supports (selector(::scroll-marker)) {
			.wp-block-gallery.is-style-osom-carousel-button-navigation {
				scrollbar-width: none;
				-ms-overflow-style: none;

				&::-webkit-scrollbar {
					display: none;
				}

				&::scroll-button(*) {
					inline-size: 2.5rem;
					aspect-ratio: 1;
					border-radius: 50%;
					border: 2px solid #a80048;
					background: var(--wp--preset--color--background, #fff);
					color: #a80048;
					transition: all 0.3s ease;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 1rem;
					margin: 1rem;
					position: fixed;
					position-anchor: --carousel;
				}

				&::scroll-button(*):focus-visible {
					outline-offset: 2px;
					outline-color: var(--wp--preset--color--primary);
				}

				&::scroll-button(*):not(:disabled):is(:hover, :active) {
					background: #a80048;
					color: var(--wp--preset--color--background, #fff);
					border-color: #a80048;
				}

				&::scroll-button(*):not(:disabled):active {
					scale: 90%;
				}

				&::scroll-button(right) {
					position-area: inline-end center;
					content: "⮕" / "Scroll Right";
				}

				&::scroll-button(left) {
					position-area: inline-start center;
					content: "⬅" / "Scroll Left";
				}
			}
		}'
	) );
}