Carrusel creado solo con CSS, navegación con puntos

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_dot_navigation_style' );
function cg_carousel_dot_navigation_style() {
	register_block_style( 'core/gallery', array(
		'name'         => 'osom-carousel-dot-navigation',
		'label'        => __( 'Carousel with Dots', 'osom-block-styles' ),
		'inline_style' => '
			.wp-block-gallery.is-style-osom-carousel-dot-navigation {
				flex-wrap: nowrap !important;
				overflow-x: auto;
				scroll-snap-type: x mandatory;
				overscroll-behavior-x: contain;
				-ms-overflow-style: none;
			}

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

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

			@supports (selector(::scroll-marker)) {
				.wp-block-gallery.is-style-osom-carousel-dot-navigation {
					scroll-marker-group: after;
				}

				.wp-block-gallery.is-style-osom-carousel-dot-navigation::scroll-marker-group {
					grid-area: markers;
					display: grid;
					place-content: safe center;
					grid: 30px / auto-flow 30px;
					gap: 15px;
					padding: 15px;
					scroll-padding: 150px;
					overflow: auto;
					overscroll-behavior-x: contain;
					scrollbar-width: none;
					scroll-snap-type: x mandatory;
				}

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

				.wp-block-gallery.is-style-osom-carousel-dot-navigation figure::scroll-marker {
					content: " ";
					border: 1px solid var(--wp--preset--color--contrast-2, #bbb);
					border-radius: 50%;
					outline-offset: 4px;
					-webkit-tap-highlight-color: transparent;
					scroll-snap-align: center;
				}

				.wp-block-gallery.is-style-osom-carousel-dot-navigation figure::scroll-marker:is(:hover, :focus-visible) {
					border-color: var(--wp--preset--color--primary, LinkText);
				}

				.wp-block-gallery.is-style-osom-carousel-dot-navigation figure::scroll-marker:target-current {
					background: var(--wp--preset--color--primary, LinkText);
					border-color: var(--wp--preset--color--primary, LinkText);
				}
				.wp-block-gallery.is-style-osom-carousel-dot-navigation {
					scrollbar-width: none;
					-ms-overflow-style: none;

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