Tema 23 · Carrusel y Offcanvas

Carrusel de Imágenes y Menús Deslizantes (Offcanvas)

Aprende a crear presentaciones de diapositivas automáticas con .carousel y barras laterales deslizantes tipo aplicación móvil con el componente .offcanvas de Bootstrap 5.

Ventanas Modales Emergentes (Modals) Utilidades Espaciales, Sombras y Flexbox

Carruseles de Diapositivas (.carousel)

El componente Carrusel permite rotar elementos interactivos o imágenes como una presentación de diapositivas cíclica con controles anterior/siguiente y transiciones animadas suaves. 

<div id="miCarrusel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="p-5 bg-primary text-white text-center">Diapositiva 1</div>
    </div>
    <div class="carousel-item">
      <div class="p-5 bg-dark text-white text-center">Diapositiva 2</div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#miCarrusel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#miCarrusel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Barras Laterales Deslizantes (.offcanvas)

Similar a un menú de aplicación móvil nativa, el Offcanvas oculta un panel fuera de la pantalla que se desliza suavemente al hacer clic desde la izquierda (.offcanvas-start), derecha (.offcanvas-end), arriba (.offcanvas-top) o abajo (.offcanvas-bottom): 

<!-- Botón que abre el menú deslizante -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#menuLateral">
  Abrir Menú Lateral
</button>

<!-- Contenedor Offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="menuLateral">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Navegación Móvil</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    Contenido del menú lateral, enlaces de usuario o filtros.
  </div>
</div>

⚡ Carrusel Interactivo y Panel Deslizante Offcanvas

Navega por las diapositivas con los controles laterales y haz clic en el botón superior para desplegar el menú Offcanvas:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Carrusel y Offcanvas en Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 680px;">
    <!-- Botón para activar el Offcanvas -->
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h4 class="fw-bold mb-0">Demostración de Componentes</h4>
      <button class="btn btn-outline-dark rounded-pill px-3 fw-semibold shadow-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#menuOffcanvas">
        ☰ Menú Lateral (Offcanvas)
      </button>
    </div>

    <!-- Carrusel de Diapositivas -->
    <div id="carruselEjemplo" class="carousel slide rounded-4 overflow-hidden shadow-sm mb-4" data-bs-ride="carousel">
      <div class="carousel-inner">
        <!-- Diapositiva 1 -->
        <div class="carousel-item active">
          <div class="p-5 text-center text-white" style="background: linear-gradient(135deg, #1e40af, #3b82f6); min-height: 200px;">
            <h3 class="fw-bold mb-2">1. Academia Kilopolis</h3>
            <p class="mb-0">Aprende tecnologías frontend y backend con metodologías ágiles.</p>
          </div>
        </div>

        <!-- Diapositiva 2 -->
        <div class="carousel-item">
          <div class="p-5 text-center text-white" style="background: linear-gradient(135deg, #059669, #10b981); min-height: 200px;">
            <h3 class="fw-bold mb-2">2. Editor en Tiempo Real</h3>
            <p class="mb-0">Ejecuta HTML5, CSS3, JavaScript y Bootstrap 5 sin instalar dependencias.</p>
          </div>
        </div>

        <!-- Diapositiva 3 -->
        <div class="carousel-item">
          <div class="p-5 text-center text-white" style="background: linear-gradient(135deg, #7c3aed, #a855f7); min-height: 200px;">
            <h3 class="fw-bold mb-2">3. Tutoría Sócrates AI</h3>
            <p class="mb-0">Resuelve dudas de código con pedagogía socrática personalizada.</p>
          </div>
        </div>
      </div>

      <!-- Controles Anterior / Siguiente -->
      <button class="carousel-control-prev" type="button" data-bs-target="#carruselEjemplo" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Anterior</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carruselEjemplo" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Siguiente</span>
      </button>
    </div>
  </div>

  <!-- Panel Deslizante Lateral (Offcanvas) -->
  <div class="offcanvas offcanvas-start shadow" tabindex="-1" id="menuOffcanvas" aria-labelledby="offcanvasTitulo">
    <div class="offcanvas-header bg-dark text-white p-3">
      <h5 class="offcanvas-title fw-bold" id="offcanvasTitulo">🏛️ Menú Kilopolis</h5>
      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Cerrar"></button>
    </div>
    <div class="offcanvas-body p-4">
      <p class="text-secondary small">
        Este panel se despliega suavemente desde el lateral izquierdo mediante <code>.offcanvas-start</code>.
      </p>
      <ul class="list-group list-group-flush mb-4">
        <li class="list-group-item"><a class="text-decoration-none text-dark fw-semibold">Mis Cursos</a></li>
        <li class="list-group-item"><a class="text-decoration-none text-dark fw-semibold">Sandbox Interactivo</a></li>
        <li class="list-group-item"><a class="text-decoration-none text-dark fw-semibold">Certificados</a></li>
      </ul>
      <button class="btn btn-primary w-100 rounded-pill" data-bs-dismiss="offcanvas">
        Cerrar Menú
      </button>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de Bootstrap 5.3 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.