Build step by step with TrummerWork.

<!-- Container and horizontal scrolling variant -->
<div class="slider slider-basico">
  <!-- Track moved by JavaScript to change slides -->
  <div class="slider-pista">
    <!-- Each article is a slide; here it is paired with a background -->
    <article class="slider-diapositiva fondo-azul">
      <h2 class="titulo titulo-mediano texto-blanco">First slide</h2>
    </article>
    <!-- Duplicate this article to add another slide -->
    <article class="slider-diapositiva fondo-verde">
      <h2 class="titulo titulo-mediano texto-blanco">Second slide</h2>
    </article>
  </div>
  <!-- Optional previous control -->
  <button class="slider-anterior" type="button"
          aria-label="Previous slide">‹</button>
  <!-- Optional next control -->
  <button class="slider-siguiente" type="button"
          aria-label="Next slide">›</button>
</div>Copy

<!-- Variant that automatically generates navigation dots -->
<div class="slider slider-con-indicadores">
  <!-- Track containing all slides -->
  <div class="slider-pista">
    <!-- First slide -->
    <article class="slider-diapositiva fondo-primario">
      <h2 class="titulo titulo-mediano texto-blanco">First slide</h2>
    </article>
    <!-- Second slide -->
    <article class="slider-diapositiva fondo-morado">
      <h2 class="titulo titulo-mediano texto-blanco">Second slide</h2>
    </article>
  </div>
  <!-- Previous and next controls -->
  <button class="slider-anterior" type="button"
          aria-label="Previous slide">‹</button>
  <button class="slider-siguiente" type="button"
          aria-label="Next slide">›</button>
  <!-- The script inserts one dot per slide here -->
  <div class="slider-indicadores"></div>
</div>Copy

<!-- Variant that changes slides using opacity -->
<div class="slider slider-fundido">
  <!-- The track contains the stacked slides -->
  <div class="slider-pista">
    <!-- Initial slide -->
    <article class="slider-diapositiva fondo-naval">
      <h2 class="titulo titulo-mediano texto-blanco">First slide</h2>
    </article>
    <!-- Next slide -->
    <article class="slider-diapositiva fondo-rojo">
      <h2 class="titulo titulo-mediano texto-blanco">Second slide</h2>
    </article>
  </div>
  <!-- Optional controls for manual navigation -->
  <button class="slider-anterior" type="button"
          aria-label="Previous slide">‹</button>
  <button class="slider-siguiente" type="button"
          aria-label="Next slide">›</button>
</div>Copy

<!-- Variante de zoom: necesita imágenes en las diapositivas -->
<div class="slider slider-zoom">
  <!-- Track that moves the slides -->
  <div class="slider-pista">
    <!-- Image with descriptive alt text -->
    <article class="slider-diapositiva">
      <img src="foto-1.jpg" alt="Description of the first image">
    </article>
    <!-- Duplicate this structure for each additional image -->
    <article class="slider-diapositiva">
      <img src="foto-2.jpg" alt="Description of the second image">
    </article>
  </div>
  <!-- Controls for moving forward or backward -->
  <button class="slider-anterior" type="button"
          aria-label="Previous slide">‹</button>
  <button class="slider-siguiente" type="button"
          aria-label="Next slide">›</button>
</div>Copy

<!-- Hero combina indicadores con el formato large de portada -->
<section class="slider slider-con-indicadores slider-hero"
         aria-label="Main presentation">
  <!-- Track containing the hero scenes -->
  <div class="slider-pista">
    <!-- Scene: background image and overlaid text -->
    <article class="slider-diapositiva">
      <img src="foto-portada-1.jpg" alt="Description de la primera escena">
      <!-- Choose a style and position for the text -->
      <div class="slider-texto slider-texto-oscuro slider-texto-izquierda-abajo">
        <p class="texto-mayusculas texto-blanco">Introductory phrase</p>
        <h1 class="titulo-largo texto-blanco">Hero headline</h1>
        <p class="texto-grande texto-blanco">Brief project description.</p>
        <a class="boton boton-primario texto-blanco" href="#contenido">
          Learn more
        </a>
      </div>
    </article>
    <!-- Another scene can use a different style and position -->
    <article class="slider-diapositiva">
      <img src="foto-portada-2.jpg" alt="Description de la segunda escena">
      <div class="slider-texto slider-texto-vidrio slider-texto-centro">
        <h2 class="titulo-grande texto-blanco">Another key idea</h2>
        <p class="texto-grande texto-blanco">Another brief message.</p>
        <a class="boton fondo-verde texto-blanco" href="#contenido">
          View details
        </a>
      </div>
    </article>
  </div>
  <!-- Controls for navigating between scenes -->
  <button class="slider-anterior" type="button"
          aria-label="Previous slide">‹</button>
  <button class="slider-siguiente" type="button"
          aria-label="Next slide">›</button>
  <!-- The script creates the navigation dots -->
  <div class="slider-indicadores"></div>
</section>Copy

<!-- The slide positions the image and text overlay -->
<article class="slider-diapositiva">
  <!-- Background image with accessible description -->
  <img src="foto.jpg" alt="Description of the scene">
  <!-- Combine slider-texto + una apariencia + una posición -->
  <div class="slider-texto slider-texto-oscuro slider-texto-izquierda-abajo">
    <!-- Content title and description -->
    <h2 class="texto-blanco">Title over the image</h2>
    <p class="texto-blanco">A brief, readable description.</p>
    <!-- Optional slide action -->
    <a class="boton boton-primario texto-blanco" href="#contenido">
      Learn more
    </a>
  </div>
</article>

<!-- Styles: slider-texto-oscuro, slider-texto-claro,
     slider-texto-blanco or slider-texto-vidrio.
     Positions: slider-texto-centro, slider-texto-izquierda-arriba,
     slider-texto-izquierda-abajo, slider-texto-derecha-arriba
     o slider-texto-derecha-abajo. -->Copy

<!-- Compact carousel; uses a list instead of slider-pista -->
<div class="slider-compacto">
  <!-- Capa opcional de título y descripción sobre las imágenes -->
  <div class="slider-compacto-texto">
    <h2>Project gallery</h2>
    <p>A brief gallery description.</p>
  </div>
  <!-- The active item starts with the active class -->
  <ul>
    <li class="active">
      <img src="foto-1.jpg" alt="Description of the first image">
    </li>
    <li>
      <img src="foto-2.jpg" alt="Description of the second image">
    </li>
    <li>
      <img src="foto-3.jpg" alt="Description of the third image">
    </li>
  </ul>
  <!-- Botones de navegación propios del slider compacto -->
  <button class="slider-compacto-anterior" type="button"
          aria-label="Previous image">‹</button>
  <button class="slider-compacto-siguiente" type="button"
          aria-label="Next image">›</button>
</div>Copy

<!-- Footer; the framework applies the background and color -->
<footer class="footer">
  <!-- Centers the content and limits its width -->
  <div class="footer-contenido">
    <!-- Top area with branding and navigation columns -->
    <div class="footer-superior">
      <!-- Site identity and short description -->
      <section class="footer-marca">
        <h2>My site</h2>
        <p>A short description of your project.</p>
      </section>
      <!-- First link column -->
      <nav class="footer-columna" aria-label="Main links">
        <h2>Explore</h2>
        <a href="#inicio">Home</a>
        <a href="#servicios">Services</a>
      </nav>
      <!-- Add more nav.footer-columna elements if you need more groups -->
      <nav class="footer-columna" aria-label="Help and resources">
        <h2>Resources</h2>
        <a href="#ayuda">Help</a>
        <a href="#contacto">Contact</a>
      </nav>
    </div>
    <!-- Bottom row for copyright and secondary links -->
    <div class="footer-inferior">
      <p>© 2026 My Site. All rights reserved.</p>
      <a href="#privacidad">Privacy</a>
    </div>
  </div>
</footer>Copy

<!-- Add the class to the element you want to animate -->
<h2 class="desvanecer-entrada">Fades in smoothly</h2>

<!-- Fades out smoothly -->
<div class="desvanecer-salida">Temporary message</div>

<!-- Enters from below -->
<article class="tarjetas deslizar-arriba">Content</article>

<!-- Enters from above -->
<section class="deslizar-abajo">Content</section>

<!-- Enters from the right -->
<div class="deslizar-izquierda">Content</div>

<!-- Enters from the left -->
<div class="deslizar-derecha">Content</div>

<!-- Appears while growing -->
<div class="zoom-in">Content ampliado</div>

<!-- Disappears while shrinking -->
<div class="zoom-out">Content that closes</div>

<!-- Appears with a brief bounce -->
<div class="bounce-in">New element</div>Copy