Carrusel de banners de la portada (/)

Ficha técnica

Impacto — Tema: lib.php (theme_cdigital_get_banner_slides), templates/frontpage.mustache, AMD banner_carousel.js, SCSS .cdigital-banner*, strings frontpage_banner_*, pix/frontpage/ai_companion_banner.png y pix/Icon/{pause,play,arrow-left,arrow-right,right-arrow-circle-white}.svg
Impacto — Plugin: —
Requisito: Diseño (Figma) · Figma: 19613-6391 (slides 19613-6392 y 19934-3890) · Estado: Implementado

Banner principal de la portada del sitio (slug /). Es un carrusel de dos slides que rota automáticamente y expone controles manuales: flechas laterales, puntos indicadores y un botón de pausa/reanudación.

Slides

#	Título	Llamados a la acción	Ilustración	Fondo
1	Aprendemos hoy para transformar la enseñanza.	"Explorar cursos" → `/course/index.php` · "Ver categorías" → `/course/index.php`	`pix/frontpage/landing_banner.png`	Blanco
2	Acompañamiento pedagógico dentro de tus cursos	"Ingresar a la plataforma" → `/login/index.php`	`pix/frontpage/ai_companion_banner.png`	`#F3F7FD`

El contenido de los dos slides vive en los archivos de idioma (lang/{es,en}/theme_cdigital.php), no en ajustes de administración: es material de diseño aprobado y queda versionado con el tema.

Arquitectura

Mismo patrón del resto de la portada: presentación armada en el tema, sin bloques ni plugin de datos.

theme_cdigital/layout/frontpage.php
  └── theme_cdigital_prepare_frontpage_context()  (lib.php)
        └── theme_cdigital_get_banner_slides()    -> contexto bannerslides
              └── templates/frontpage.mustache    (section .cdigital-banner)
                    └── AMD theme_cdigital/banner_carousel

theme_cdigital_get_banner_slides() devuelve la lista de slides ya resuelta (título, texto, botones con su URL, ilustración, alt y variante de fondo) y calcula por slide index, first, last, active, la etiqueta accesible de posición y la del punto indicador. El template recorre esa lista; añadir o quitar un slide no requiere tocar el markup ni el JS.

Comportamiento

Transición Slide Left / Slide Right: los slides se disponen uno al lado del otro dentro de una pista (.cdigital-banner__track) que se desplaza con transform: translateX() y una transición de 0,5 s. El slide que sale no se oculta con hidden —eso impediría la animación—: queda fuera del viewport con overflow: hidden y marcado con inert + aria-hidden.
Rotación automática cada 7 segundos.
La rotación se detiene con el puntero encima, con el foco de teclado dentro del banner y cuando la pestaña pasa a segundo plano; se reanuda sola al salir, salvo que el usuario haya pulsado "Pausar".
Flechas y puntos avanzan de slide y reinician el intervalo, para que el slide elegido se lea completo.
Flechas izquierda y derecha del teclado navegan entre slides cuando el foco está en el banner.

Accesibilidad

El banner declara aria-roledescription="carousel" y cada slide aria-roledescription="slide" con su etiqueta "Banner N de M".
El botón "Pausar"/"Reanudar" cumple el criterio WCAG 2.2.2 (Pausar, detener, ocultar): hay una forma explícita de detener el movimiento automático.
Con prefers-reduced-motion: reduce el carrusel arranca pausado, no rota nunca y la pista pierde la transición (el cambio manual salta directo al slide destino).
El contenedor de slides alterna aria-live entre off (rotando) y polite (pausado), de modo que los cambios manuales se anuncian sin que la rotación interrumpa la lectura.
Solo el primer slide lleva H1 (#frontpage-main-title, destino del enlace "Saltar al contenido"); los siguientes usan H2, para conservar un único H1 por página.

Ancho a sangre y margen superior

El banner ocupa el ancho completo de la ventana y su borde superior toca el encabezado. Boost lo impide por dos reglas pensadas para su propia barra de navegación fija y sus botones de drawer: #page.drawers { margin-top: $navbar-height } y #page.drawers { padding-left: 3rem; padding-right: 3rem } de md en adelante. El encabezado de theme_cdigital está en flujo normal y la portada no tiene botones de drawer junto al contenido, así que ambas se anulan solo en este layout, atadas a la clase de body cdigital-frontpage que agrega layout/frontpage.php. El resto de secciones de la portada conserva su ancho porque se centra con .container, no con el padding de #page.

Responsive

Por debajo de 992 px el slide pasa a una sola columna con la ilustración arriba, los botones ocupan el ancho disponible, las flechas laterales se ocultan (se solaparían con el texto) y la barra de controles apila el botón de pausa sobre los puntos.

Archivos clave

Archivo	Descripción
`theme/cdigital/lib.php`	`theme_cdigital_get_banner_slides()` y su entrada en el contexto de la portada
`theme/cdigital/templates/frontpage.mustache`	Markup del carrusel (`section.cdigital-banner`) e inicialización del módulo AMD
`theme/cdigital/amd/src/banner_carousel.js`	Rotación, controles, teclado y respeto de `prefers-reduced-motion`
`theme/cdigital/scss/preset/cdigital.scss`	Sección `.cdigital-banner*` y su bloque responsive
`theme/cdigital/pix/frontpage/ai_companion_banner.png`	Ilustración del slide 2 (1120 px, 2× del render)
`theme/cdigital/pix/Icon/`	`pause.svg`, `play.svg`, `arrow-left.svg`, `arrow-right.svg`, `right-arrow-circle-white.svg`
`theme/cdigital/lang/{en,es}/theme_cdigital.php`	Strings `frontpage_banner_*` y `frontpage_view_categories`

Slides​

Arquitectura​

Comportamiento​

Accesibilidad​

Ancho a sangre y margen superior​

Responsive​

Archivos clave​