Sistema de Diseño
Inicio / Front-end / Carrusel

Carrusel

El componente de carrusel permite crear colecciones de elementos con navegación tipo carrusel. Utiliza la librería Splide.js para generar la interacción, por lo que debes incluirla antes del archivo scripts del Kit.

Galería de imágenes

Ejemplo
HTML
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">

<!-- Carousel -->
<div class="splide udec-carousel" role="group" aria-label="Galería de imágenes">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
				<figure>
					<img src="https://picsum.photos/1600/900?random=1" width="1600" height="900" alt="Imagen 1" />
				</figure>
			</li>
			<li class="splide__slide">
				<figure>
					<img src="https://picsum.photos/1600/900?random=2" width="1600" height="900" alt="Imagen 2" />
				</figure>
			</li>
			<li class="splide__slide">
				<figure>
					<img src="https://picsum.photos/1600/900?random=3" width="1600" height="900" alt="Imagen 3" />
				</figure>
			</li>
			<li class="splide__slide">
				<figure>
					<img src="https://picsum.photos/1600/900?random=4" width="1600" height="900" alt="Imagen 4" />
				</figure>
			</li>
		</ul>
	</div>

	<div class="udec-carousel__nav udec-carousel__nav--fixed">
		<button class="splide__toggle" type="button">
			<span class="splide__toggle__icon"></span>
		</button>
		<div class="splide__counter"></div>
		<div class="splide__arrows">
			<button class="splide__arrow splide__arrow--prev" type="button" aria-label="Anterior">
				<span class="splide__arrow__icon"></span>
			</button>
			<button class="splide__arrow splide__arrow--next" type="button" aria-label="Siguiente">
				<span class="splide__arrow__icon"></span>
			</button>
		</div>
	</div>

	<div class="splide__progress">
		<div class="splide__progress__bar"></div>
	</div>
</div>

Galería de altura completa

Ejemplo
HTML
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">

<!-- Carousel -->
<div class="grid-2 gap-0">
	<div class="splide udec-carousel udec-carousel--fullheight">
		<div class="splide__track">
			<ul class="splide__list">
				<li class="splide__slide">
					<figure>
						<img src="https://picsum.photos/1200/800?random=5" alt="Imagen 1" />
					</figure>
				</li>
				<li class="splide__slide">
					<figure>
						<img src="https://picsum.photos/1200/800?random=6" alt="Imagen 2" />
					</figure>
				</li>
				<li class="splide__slide">
					<figure>
						<img src="https://picsum.photos/1200/800?random=7" alt="Imagen 3" />
					</figure>
				</li>
			</ul>
		</div>
		<div class="udec-carousel__nav udec-carousel__nav--fixed">
			<button class="splide__toggle" type="button">
				<span class="splide__toggle__icon"></span>
			</button>
			<div class="splide__counter"></div>
			<div class="splide__arrows">
				<button class="splide__arrow splide__arrow--prev" type="button" aria-label="Anterior">
					<span class="splide__arrow__icon"></span>
				</button>
				<button class="splide__arrow splide__arrow--next" type="button" aria-label="Siguiente">
					<span class="splide__arrow__icon"></span>
				</button>
			</div>
		</div>

		<div class="splide__progress">
			<div class="splide__progress__bar"></div>
		</div>
	</div>
	<div style="padding: var(--spacing-48);" class="has-blue-700-background-color has-white-color flow">
		<span class="udec-category-tag">Unidad de Deportes DISE</span>
		<h2 class="mt-16">La UdeC desde la perspectiva de los alumnos</h2>
		<hr class="hr--narrow mt-0 mb-0" />
		<p>Esta Unidad es la encargada de generar instancias deportivas, recreativas y de actividades masivas de integración para la formación integral y de excelencia. Su objetivo principal es entregar a los y las estudiantes las herramientas necesarias para su desarrollo integral al interior de la Universidad y ser la fuente motivadora y precursora de cambios positivos tanto en el aspecto físico como en el mental, a través de difusión o promoción de estilos de vida saludables.</p>
		<div>
			<a href="#" class="udec-button udec-button--icon" style="text-decoration: none;">
				Ver más
				<svg class="udec-button__icon" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
					<path d="M5.33337 26.6667V5.33333H14.9744V6.66667H6.66671V25.3333H25.3334V17.0257H26.6667V26.6667H5.33337ZM12.9847 19.959L12.041 19.0153L24.3897 6.66667H18.6667V5.33333H26.6667V13.3333H25.3334V7.61033L12.9847 19.959Z" fill="currentColor" />
				</svg>
			</a>
		</div>
	</div>
</div>

Galería dentro de banner

Ejemplo
HTML
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">

<!-- Carousel -->
<div class="udec-banner alignfull">
	<img decoding="async" width="1200" height="750" class="udec-banner__image-background" alt="Imagen de ejemplo" src="https://picsum.photos/id/609/1200/750" data-object-fit="cover">
	<span aria-hidden="true" class="udec-banner__overlay udec-banner__overlay--noise"></span>
	<div class="container">
		<h2 class="mb-32">Testimonios</h2>
		<div class="splide udec-carousel">
			<div class="splide__track">
				<ul class="splide__list">
					<li class="splide__slide">
						<div class="carousel__slide--testimony">
							<div class="carousel__slide--testimony__media">
								<figure>
									<img src="https://picsum.photos/400/400?random=1" alt="María González" />
								</figure>
							</div>
							<div class="carousel__slide--testimony__content">
								<p>La Universidad me brindó las herramientas necesarias para desarrollarme profesionalmente. La calidad de sus docentes y la infraestructura son excepcionales.</p>
								<div class="carousel__slide--testimony__author">
									<p><strong>María González</strong></p>
									<p>Ingeniera Civil, Promoción 2020</p>
								</div>
							</div>
						</div>
					</li>
					<li class="splide__slide">
						<div class="carousel__slide--testimony">
							<div class="carousel__slide--testimony__media">
								<figure>
									<img src="https://picsum.photos/400/400?random=2" alt="Carlos Ramírez" />
								</figure>
							</div>
							<div class="carousel__slide--testimony__content">
								<p>Estudiar aquí fue una experiencia transformadora. Los valores institucionales y el compromiso con la excelencia académica son ejemplares.</p>
								<div class="carousel__slide--testimony__author">
									<p><strong>Carlos Ramírez</strong></p>
									<p>Médico Cirujano, Promoción 2019</p>
								</div>
							</div>
						</div>
					</li>
					<li class="splide__slide">
						<div class="carousel__slide--testimony">
							<div class="carousel__slide--testimony__media">
								<figure>
									<img src="https://picsum.photos/400/400?random=3" alt="Ana Martínez" />
								</figure>
							</div>
							<div class="carousel__slide--testimony__content">
								<p>La formación integral que recibí me permitió no solo adquirir conocimientos técnicos, sino también desarrollar habilidades de liderazgo y trabajo en equipo.</p>
								<div class="carousel__slide--testimony__author">
									<p><strong>Ana Martínez</strong></p>
									<p>Arquitecta, Promoción 2021</p>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="udec-carousel__nav">
				<div class="splide__counter"></div>
				<div class="splide__arrows">
					<button class="splide__arrow splide__arrow--prev" type="button" aria-label="Anterior">
						<span class="splide__arrow__icon"></span>
					</button>
					<button class="splide__arrow splide__arrow--next" type="button" aria-label="Siguiente">
						<span class="splide__arrow__icon"></span>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>